JQuery常见方法

<!DOCTYPE htmi>
<html>

<head>
    <meta charset="UTF-8">
    <title>JQuery常见方法示例</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            ////attr() 方法设置或返回被选元素的属性值，自定义属性时使用。
            //var item0=$("div").attr("data-code");//获取某属性值
            //$("ul").attr("class","box");//设置某属性值
            //$("ul").attr({"class":"box","name":"book"});//设置多个属性值

            ////prop() 方法设置或返回被选元素的属性和值,固有属性时使用。
            //var item1 = $("div").prop("class");//获取某属性值
            //$("ul").prop("class", "box");//设置某属性值
            //$("li").prop({ "class": "book", "title": "123" });//设置多个属性值
            //$("div").removeAttr("data-code"); //移除属性
            //$("div").removeClass();//移除标签类名
            //$("div").addClass("test");//添加标签类名

            ////find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
            //$("div").find("ul").css("background", "red");

            ////append() 方法在被选元素的结尾（仍然在内部）插入指定内容(html内容)。
            //$("li").append("<a href='http://www.baidu.com'>123</a>");

            ////parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
            //$("p").parent(".selected").css("background", "yellow");

            ////filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
            //$("li").filter(".li").css("background", "yellow").attr("name","li");
            //$('li').filter(':even').css('background-color', 'red');//:even忽略偶数
            //$("ul").find("li").filter(':even').css('background-color', 'red');

            ////not() 从匹配元素集合中删除元素。与filter() 相反
            //$('li').not(':even').css('background-color', 'red');

            ////has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。它跟filter()方法是有区别的。has()方法有父子级关系。
            //$('ul').has('.li').css('background','red');   //只有包含的标签的class值是box的div(父级)的背景色为红色

            ////eq(0) 第1个
            //$('div').find('li').eq(0).css('background','red');   //给div下的第一个li的背景设置为红色

            ////next() 下一个
            //$('div').find('li').eq(0).next().css('background','red');  //给div下的第一个li的下一个li的背景设置为红色

            ////prev() 上一个
            $('div').find('li').eq(4).prev().css('background', 'red');  //给div下的第一个li的上一个li的背景设置为红色

            ////index():索引就是当前元素在所有兄弟节点中的位置
            $("li").click(function () {
                confirm($(this).index());
            });


            ////
            $('div').closest('form'); //选择离div最近的那个form父元素
            $('div').children(); //选择div的所有子元素
            $('div').siblings(); //选择div的同级元素

            $('div').insertAfter($('p'));//使用.insertAfter()，把div元素移动p元素后面
            $('p').after($('div'));//使用.after()，把p元素加到div元素前面
            //.insertAfter()和.after()：在现存元素的外部，从后面插入元素
　　        //.insertBefore()和.before()：在现存元素的外部，从前面插入元素
        　　//.appendTo()和.append()：在现存元素的内部，从后面插入元素
        　　//.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
            //confirm(item1);
        });
    </script>
</head>

<body>
    <div class="book" data-code="book_code">
        <ul>
            <li>1.前言</li>
            <li class="li">2.目录</li>
            <li class="li">3.第一章</li>
            <li class="li">4.第二章</li>
            <li>5.第三章</li>
            <li>6.第四章</li>
            <li>7.第五章</li>
        </ul>
    </div>
    <li>6.第六章</li>
    <li>7.第七章</li>
    <div class="selected">
        <p>Hello Again</p>
    </div>
</body>

</html>
猜你喜欢
