JQuery加载

一般开发中不用原生的JavaScript而是用JQuery，开发效率比较高。
下面程序是原生和JQuery库的比较程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('div1');

            alert('原声弹出的' + oDiv);
        };

        $(document).ready(function () {//这是jquery的写法，作用和原生js的window.onload作用是一样的
            var $div = $('#div1');
            alert('jquery弹出的' + $div);
        });

        //下面是上面jQuery完整写法的简写
        $(function () {
            var $div = $('#div1');
            alert('jquery简写弹出的' + $div);
        });

    </script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

虽然原生的js函数是写在前面的，但是实际上JQuery弹出之后才会弹出js的alert，因为window.onload是等标签加载完成之后，再渲染完之后才允许。ready是等标签加载完之后就运行，所以要快。

JQuery选择器

    * jquery可以快速的选择元素，选择规则和css样式相同，使用length属性判断是是否选择成功
        * $(#myid) 选择id为myid的网页元素
        * $('.myclass') 选择class为myclass的元素
        * $("li")   选择所有li元素
        * $("#ul1 li span")  选择id为ul1元素下的所有li下的span元素
        * $("input[name=first]")    选择name属性等于first的input属性
    
    *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><!--不能直接撬开这里写-->
    <script type="text/javascript">
        /*
        * jquery可以快速的选择元素，选择规则和css样式相同，使用length属性判断是是否选择成功
            * $(#myid) 选择id为myid的网页元素
            * $('.myclass') 选择class为myclass的元素
            * $("li")   选择所有li元素
            * $("#ul1 li span")  选择id为ul1元素下的所有li下的span元素
            * $("input[name=first]")    选择name属性等于first的input属性
        *
        * 对选择集进行过滤
            * $("div").has("p") 选择包含p元素的div元素
            * $('div').not(".myclass")  选择class不等于myclass的div元素
            * $('div').filter('.myclass')   选择class等于myclass的元素
            * $('div').eq(5)    选择第六个div元素
        * */
        $(function () {
            var $div = $(#div1);
            var $div2 = $('.box');
            var $li = $('.list li');

            $div.css({'color': 'red'});
            $div2.css({'color': 'green'});
            $li.css({'color':'prink'});
        });
    </script>
    <!--<style type="text/css">-->
    <!--#div1{-->
    <!--color: red;-->
    <!--}-->

    <!--.box{-->
    <!--color: green;-->
    <!--}-->

    <!--.list li{-->
    <!--background-color: mediumspringgreen;-->
    <!--}-->
    <!--</style>-->
</head>
<body>
<div id="div1">div1</div>

<div class="box">div2</div>
<div class="box">div3</div>

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>

对选择集进行过滤
* $(“div”).has(“p”) 选择包含p元素的div元素
* $(‘div’).not(".myclass") 选择class不等于myclass的div元素
* $(‘div’).filter(’.myclass’) 选择class等于myclass的元素
* $(‘div’).eq(5) 选择第六个div元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $div=$('div')
            $div.css({backgroundColor:'red'});
            $div.has('p').css({backgroundColor:"green"});
            $div.eq(4).css({textIndent:'20px'});
        })
    </script>
</head>
<body>
    <div>1</div>
    <div><p>2</p></div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</body>
</html>

判断是否选择到了元素
JQuery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素，length等于0就是没找到元素，大于0就是找到了元素
var $div1=$("#div1");
alert($div1.length);

手册上传至github。

JQuery的加载和选择器

JQuery加载

JQuery选择器

猜你喜欢