前言:
j --> JavaScript Query --> 查询
jquery的入口函数
等DOM结构渲染完毕即可执行内部代码
相当于原生js的DOMContentLoaded
不同于原生js中的load是等一切加载完毕再执行
用法:(推荐第二种)
$(document).ready(function() { // 执行代码 })
$(function() { // 执行代码 })
$ 和 jQuery
1.$是jQuery的别称
jQuery(function() {
jQuery('div').hide();
});
2.$是jQuery的顶级对象
DOM对象和jQuery对象
1.DOM对象: 用原生js获取过来的对象就是DOM对象
2.jQuery对象: 用jquery方式获取过来的就是jQuery对象。本质:通过$把DOM元素进行了包装
3.jQuery对象 只能使用jquery方法 DOM对象则使用原生的JavaScript属性和方法
错误写法:
myDiv.hide(); //myDiv是一个DOM对象不能使用jquery里面的hide方法 $('div').style.display = 'none'; //这个$('div')是一个jQuery对象不能使用原生js的属性和方法
DOM对象和jQuery对象的转换
1.DOM --> jQuery:
a.直接获取:$('video');
b.将dom转换为jquery:$(DOM对象)
2.jQuery --> DOM:
(1).$('div')[index] //index是索引号
eg: $('div')[index].play()
(2).$('div').get(index) // 通过此方法可以引用DOM有的一些而jq没有的方法
jQuery基础选择器
基础选择器:
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $("#id") | |
全选选择器 | $("*") | |
类选择器 | $(".class") | |
标签选择器 | $("div") | |
并集选择器 | $("div,p,li") | 选取多个元素 |
交集选择器 | $("li.current") | 交集元素 |
层级选择器:
子代选择器 | $("ul>li") | 亲儿子 |
---|---|---|
后代选择器 | $("ul li") | 儿子、孙子等 |
隐式迭代
把匹配的所有元素内部进行遍历循环
jQuery筛选选择器
语法 | 用法 | 描述 |
---|---|---|
:first | $("li:first") | 获取第一个li元素 |
:last | $("li:last") | 最后一个 |
:eq(index) | $("li:eq(2)") | 索引号为2的元素,索引号从0开始 |
:odd | $("li:odd") | 奇数 |
:even | $("li:even") | 偶数 |
jQuery筛选方法
语法 | 用法 | 说明 |
---|---|---|
parent() | $("li").parent(); | 查找父级 |
children(selector) | $("ul").children("li") | 相当于$("ul>li")找亲儿子 |
find(selector) | $("ul").find("li") | 相当于$("ul li")找后代 |
siblings(selector) | $(".first").siblings("li") | 兄弟,不包括自己 |
nextAll([expr]) | $(".first").nextAll() | 该元素之后所有同辈元素 |
prevtAll([expr]) | $(".last").prevAll | 该元素之前所有同辈元素 |
hasClass(class) | $('div').hasClass("protected") | 检查当前元素是否含某特定值,若有则返回true |
eq(index) | $("li").eq(2) | 当对于$("li:eq(2)") |
写在最后:这个是备战蓝桥杯web组时学习的一些JQuery基础用法,不过现在蓝桥杯web组已经不考JQuery了