jQuery——(笔记)

---

jQuery

jQuery是基于JavaScript的库 （“”）双引号规范 下载地址：https://jquery.com

入口函数

$(function(){
   
	alert("入口函数")
}) // 或
$(document).ready(function(){
   
	alert("入口函数")
})

DOM与jQuery

顶级对象 $ 相当于 jQuery 相当于 window
原生 js 获取的对象的 DOM 对象只能使用原生的方法
jQuery 获取过来的是 jQuery 对象只能使用jQuery的方法
DOM对象 转 jQuery对象：用$(DOM对象)把DOM对象进行包装jQuery对象转DOM对象：$(‘div’)[index] index是索引号 或 $(‘div’).get(index) index是索引号

$(function(){
    // DOM对象 转 jQuery对象
	var box = document.querySelector(".box"); // DOM对象
	$(box).hide(); // box是原生不能使用jQuery方法 用$()进行包装实现转换
})

$('box'); // 为jQuery对象
$('box')[0].play(); // 添加索引号为DOM对象 使用DOM方法
$('box').get(0).play() // 添加get(索引号)为DOM对象 使用DOM方法

API

基础选择器

名称	用法	描述
全选选择器	$(“*”)	匹配所有元素
ID选择器	$(“#id”)	获取指定ID的元素
类选择器	$(“.class”)	获取同一类class的元素
标签选择器	$(“div”)	获取同一标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素
子代选择器	$(“ul>li”)	获取亲儿子，不会获取孙子
后代选择器	$(“ul li”)	获取ul下的所有元素，包括孙子

隐式迭代

给元素进行循环遍历，执行相应的方法

<ul>
	<li>这是第1个li</li>
	<li>这是第2个li</li>
	<li>这是第3个li</li>
</ul>

$("li").css('backgroundColor','pink'); // 隐式迭代会将获取的 li 全部 添加背景颜色

筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取li元素中从0开始索引号为2的元素
:odd	$(“li:odd”)	获取li元素，索引号为奇数的元素
:even	$(“li:even”)	获取li元素，索引号为偶数的元素

$("li:first").css('backgroundColor','pink'); // 第一个li 粉色
$("li:eq(1)").css('backgroundColor','red'); // 索引为 1 的li 红色
$("li:last").css('backgroundColor','blue'); // 最后一个 li 蓝色
// even 下标偶数 odd 下标奇数
$('li:even').css('backgroundColor','pink')
$('li:odd').css('backgroundColor','blue')

筛选方法

语法	用法	描述
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，最近一级（亲儿子）
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”)，后代选择器
siblings(selector)	$(“.first”).siblings(“li”)	存在兄弟节点，不包括本身
next()	$(“.first”).next()	返回当前元素的下一个同辈元素
nextAll([expr])	$(“.first”).nextAll()	查找当前元素之后的所有同辈元素
prevt()	$(“.last”).prevt()	返回当前元素的上一个同辈元素
prevtAll([expr])	$(“.last”).prevtAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$(‘div’).hasClass(“protected”)	检查当前元素是否有特定的类，有返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”)，从0开始

排他思想：利用$(this).siblings("li")将除本身外的其他元素去掉颜色索引号：$(this).index()得到当前索引号
链式编程：$(this).css(‘color’,‘red’).siblings().css(‘color’,‘’);

$('li').on('click',function(){
    // 给li绑定点击事件
	console.log($(this).index()); // this.index 获取当前索引号
    // 当前的li为红色，其他的兄弟去掉颜色
	$(this).css('backgroundColor','red').siblings("li").css('backgroundColor','');