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>
目前就探索探索了这一点点啊。