前言:
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了