04jQuery筛选jquery对象01

day22

jqueryDOM

jquery获取的元素会封装成在一个类数组中

jQuery元素选择器
　　$("p")选取<p>元素
　　$("p.intro")选取所有class="intro"的p元素
　　$("p#demo")选取所有id="demo"的p元素

jQuery属性选择器
　　jQuery使用XPath表达式来选择带有给定属性的元素。
　　$("[href]")选取所有带有href值等于"#"的元素
　　$("[href='#']")选取所有带有href值等于"#"的元素
　　$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
　　$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器
　　jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
　　$("p").css("background-color","red");

　　$(function(){}) 是 $(document).ready(function(){})) 的简写，
　　用来在DOM加载完成之后执行一系列预先定义好的函数。

DOM对象和jQuery对象
区别：
　　检测 DOM Object : if(obj.nodeType)
　　检测 jQuery Object : if(obj.jquery)
转换:
　　var jqueryObj = $(domObj);
　　var domObj jqueryObj.get([index]);

如何创建元素
　　$("<div>hello</div>")
　　$('<a>',{
　　text:'baidu',
　　href:'http://www.baidu.com',
　　target:'_blank'
　　})
　　$('<a>baidu</a>').attr({
　　href:'http://www.baidu.com',
　　target:'_blank'
　　})

检查元素数量
　　$("div").length

提取元素
　　[index]返回DOm元素
　　get([index])返回DOM元素或元素集合
　　eq(index)返回jQuery对象
　　first()
　　last()
　　toArry()与get()方法一样

通过关系查找jQuery对象
　　children([selector]) 直接子元素
　　contents() 直接子元素带文本和注释节
　　find(selector) 子元素孙子元素
　　parent([selector]) 父元素
　　parents([slector]) 祖宗元素
　　parentsUntil([selector]) 祖宗元素查到为止且不包括
　　closest(selector) 一定要写selector，从本对象开始查找

DOM对象和jquery对象.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div">div</div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            var DOMObject = document.getElementById('div');
            var JqueryObject = $("#div");

            console.log(DOMObject);
            console.log(JqueryObject);
            //判断
            console.log(DOMObject.nodeType);
            console.log(JqueryObject.jquery);
            //转换
            console.log($(DOMObject));
            console.log(JqueryObject.get(0));
        })
    </script>
</body>
</html>

View Code

提取元素.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">div4</div>
    <div class="div5">div5</div>
    <div class="div6">div6</div>
    <div class="div7">div7</div>
    <div class="div8">div8</div>

    <script src="jquery-3.3.1.js"></script>
    <script>
        var divs = $('div');

        console.log(divs);
        console.log(divs[0]);//DOM元素
        console.log(divs.get(0));//DOM元素或元素集合
        console.log(divs.eq(0));//对象
        console.log(divs.first());//对象
        console.log(divs.last());//对象
        console.log(divs.toArray());//元素集合
    </script>
</body>
</html>

View Code

检查元素个数.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <ur>
        <li class="item-1">item1</li>
        <li class="item-2">item2</li>
        <li class="item-3">item3</li>
        <li class="item-4">item4</li>
        <li class="item-5">item5</li>
        <li class="item-6">item6</li>
        <li class="item-7">item7</li>
        <li class="item-8">item8</li>
    </ur>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            var elements =$("li");

            var div = $('div');

            console.log(elements);

            console.log(elements.length);

            console.log(elements[0].style.color = "blue");
        })
    </script>
</body>
</html>

View Code

如何创建元素.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            /*var div = $('<div>hello</div>');

            console.log($('div'));

            div.appendTo('body');

            console.log($('div'));*/

            /*var link1 = $('<a>',{
                text:'baidu',
                target:"_blank",
                href:"http://www.baidu.com",
                title:"go to baidu"
            })

            console.log($("a"));

            link1.appendTo('body');

            console.log($('a'));*/

            var link2 = $('<a>baidu</a>').attr({
                title:"go to baidu",
                href:"http://www.baidu.com",
                target:"_blank"
            });

            console.log($('a'));

            link2.appendTo('body');

            console.log($('a'))
        })
    </script>
</body>
</html>

View Code

通过关系查找jQuery对象的方法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <p id="info">jQueryjQueryjQueryjQueryjQueryjQueryjQuery</p>
                <ur>
                    <li class="item-1">item1</li>
                    <li class="item-2">item2</li>
                    <li class="item-3">item3</li>
                    <li class="item-4">item4</li>
                    <li class="item-5">item5</li>
                    <li class="item-6">item6</li>
                    <li class="item-7">item7</li>
                    <li class="item-8">item8</li>
                </ur>
            </div>
        </div>
    </div>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            console.log($('#box3'));
            console.log($("#box2").children());
            console.log($('#box2').contents());
            console.log($('#box2').find('#box3'));
            console.log($('#box2').parent());
            console.log($('#box2').parents());
            console.log($('#box3').parentsUntil('#box1'));
            console.log($('#box3').closest('div'));
        })
    </script>
</body>
</html>

View Code