jquery的节选

最新推荐文章于 2022-09-16 11:06:59 发布

black__zzc

最新推荐文章于 2022-09-16 11:06:59 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/black__zzc/article/details/50984242

版权

.Juqery是javascript的优秀框架。

它是轻量级的js库，它兼容CSS3、各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）

jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery有如下特点:

1.提供了强大的功能函数

2.解决浏览器兼容性问题

3.实现丰富的UI

4.纠正错误的脚本知识

引入形式：

基础代码：

①：
<body>
<div>
    <div>
        <div>
            <ol>
                <li>111</li><li>112</li><li>113</li><li>114</li><li>115</li>
            </ol>
        </div>
        <ul>
            <li>黄色人种</li><li>白色人种</li><li>黑色人种</li><li>棕色人种</li>
        </ul>
    </div>
    <div>
        <p>
            <a href="#">新浪</a>
            <a href="#">网易</a>
            <a href="#">腾讯</a>
            <a href="#">百度</a>
        </p>
        <span>
            <div>第一组</div>
            <div>第二组</div>
            <div>第三组</div>
            <div>第四组</div>
            <div>第五组</div>
        </span>
        <h3>三号标题</h3><h3>四号标题</h3><h3>五号标题</h3><h3>六号标题</h3>
    </div>
    <div>
        <a href="#">pg28</a> <a href="#">pg30</a> <a href="#">pg32</a>
    </div>
</div>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
    var li=$("li");
    alert("1 获取所有的li元素长度："+li.length);
    var ultext=$("ul>li").eq(2).text();
    alert("2 获取ul下面的第三个li元素中的文本："+ultext);

    var ps=$("p>a");
    alert("3 获取所有p元素下的超链接元素："+ps.length);

    var a = $("a");
    alert("4 获取所有的超链接元素："+a.length);

    alert("5 获取第三题中最后一个超链接元素中的文字："+ps.eq(-1).html());

    var span=$("span~h3").eq(0);
    alert("6 获取span元素后面的第一个h3元素："+span.html());

    var div=$("div~div");
    alert("7 获取div后面的所有的div元素："+div.length);

    var div1 = $("div>ol");
    alert("8 获取div的子元素ol："+div1.html());

    var div2 = $("ul~div");
    alert("9 获取ul元素后面的所有的div兄弟元素："+div2.length);
</script>
</body>

②：

<body>
<ol>
    <li>苹果</li><li>芒果</li><li>小米</li><li>华为</li><li>桔子</li><li>魅族</li><li></li>
</ol>

<div style="display:none;">看不见我</div>
<div></div>
<span>前面有2个div元素</span>
<script>
    var lis = $("li");
    //lis = $("li:first");
    //lis = $("li:not(:first)");        //不是第一个的
    //lis = $("li:even");     //偶数
   // lis = $("li:gt(4)");        //匹配所有大于给定索引值的元素，文字是后面的魅族
    //lis = $("li:lt(4)");            //匹配所有小于给定索引值的元素，文字是第一个“苹果”
    //lis = $("li:contains('果')");       //匹配包含给定文本的元素
    lis = $("li:empty");           // 匹配所有不包含子元素或者文本的空元素
    alert(lis.length+",,"+lis.html());

    var divs=$("div:hidden");       //匹配所有不可见元素，或者type为hidden的元素
    divs=$("div:visible");                //匹配所有可见元素
    alert(divs.length);

</script>
</body>