初识JQuery —— 筛选方法 和 筛选选择器

JQuery本质上是JavaScript的一个库，就是JavaScript中一些经常使用的方法封装起来，以便于咱们使用。使用JQuery的核心就是使用它里面封装的方法。今天就学习了JQuery关于筛选的内容，与原生JavaScript的选择器的效果是同样的。

 

简介JQuery

jquery，J表明的是JavaScript，query是查询的意思，链接起来就是查询JavaScript。本质就是js封装好的方法，这样咱们也就能够知道js的涵盖范围是比jquery涵盖范围大的。

jQuery的语法

使用jquery是用 $ 符号来用的，里面的内容是须要用引号包裹起来的。

$(" ")

 

jQuery对象和DOM对象

DOM对象：经过原生JavaScript获取的元素

原生JavaScript就是咱们以前使用document方法

var myDiv = document.querySelector('div');
        console.log(myDiv);

jQuery对象：经过jQuery方式获取的元素

这就是经过jQuery获取的一个div。打印结果是个对象，对象的属性是伪数组的形式存储的。

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

DOM对象只能使用DOM的属性和方法，jQuery只能使用它本身的方法，就是说两者不能混合使用他们的方法。必定要好好区分。

举个例子，jQuery对象是没有style属性的，若jQuery想获得样式的话是经过调用css("属性","值")来得到的。一样DOM对象是不能使用的。

$("div").css("color", "pink");

DOM对象和jQuery对象的相互转换

//4. DOM 对象转换为jquery对象
        $(myDiv);
        //5. jquery对象转为DOM对象，两种方式 其中index是索引号
        $("div")[index];
        $("div").get(index)

 

jquery的入口

jQuery的入口函数 就至关于原生js的DOMContentLoad事件，就是当页面节点加载完成时就js就生效

// jQuery的入口函数 就至关于原生js的DOMContentLoad事件 就是当页面主要结构加载完成时有效
        // $(function () {
        //     // 代码
        // })

 

jQuery的筛选选择器

// 获取第一个元素
        $("ul li:first").css("color", "pink");
        // 获取最后一个元素
        $("ul li:last").css("color", "pink");
        // 获取索引号为index的元素
        $("ul li:eq(2)").css("color", "blue");
        // 获取奇数位的元素
        $("ol li:odd").css("color", "red");
        // 获取偶数位的元素
        $("ol li:even").css("background-color", "yellow");

 

jQuery筛选方法

// 查找父级元素 parent()
        console.log($("li").parent());
        // 查找最近一级，也就是直接后代 children()
        $("ul").children("li").css("background-color", "pink");
        // 查找后代元素 find(选择器)
        $("ul").find("li");
        // 查找兄弟节点，不包括自己 siblings(选择器)
        $("ol").siblings("li");
        // 判断对象是否含有某种类，有返回true
        console.log($("ol li:eq(1)").hasClass("current"));

 

结构

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol>
        <li>kk1</li>
        <li class="current">kk2</li>
        <li>kk3</li>
        <li>kk4</li>
        <li>kk5</li>
    </ol>

目前就探索探索了这一点点啊。