跟着pink老师学前端之jQuery

1. jQurey概述

jQuery是一个快速简洁的JavaScript库，它封装了JavaScript常用的功能代码。学习jQuery本质就是学习调用这些方法。

2. jQuery的基本使用

1. jQuery入口函数

jquery的入口函数，相当于原生js中的DOMContentLoaded。等着页面DOM加载完毕再去执行js代码。

第一种：

$(document).ready(function(){
   
    $('div').hide();
})

第二种：

$(function () {
   
    $('div').hide();
})

2. jQuery顶级对象$

$符号是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，使用$。

$符号也是jQuery的顶级对象，相当于原生js中的window。

3. jQuery对象和DOM对象

1. DOM对象：用原生js获取过来的对象就是DOM对象。
2. jQuery对象：用jQuery方式获取过来的对象是jQuery对象，本质是jQuery$将DOM对象包装后产生的对象。
3. jQuery对象只能使用jQuery方法，DOM对象只能使用原生JavaScript属性和方法。

二者的转换：

DOM对象转换为jQuery对象

// 1) 获取jQuery对象
$('video');
// 2) 获取DOM对象
var myvideo = document.querySelector('video');
// 3) 转换：直接用$包装DOM对象
$('myvideo')

jQuery对象转换成DOM对象

// 1) 第一种
$('video')[0].play();
// 2) 第二种
$('video').get(0).play();

3. jQuery常用API

1. jQuery选择器

1. jQuery基本选择器

名称	语法
ID选择器	$("#id")
全选选择器	$(’*’)
类选择器	$(".class")
标签选择器	$(“div”)
并集选择器	$(“div,p,li”)
交集选择器	$(“li.current”)

2. jQuery层级选择器

名称	语法	描述
子代选择器	$(“ul>li”)	获取亲儿子元素
后代选择器	$(“ul li”)	获取所有子代li元素

3. jQuery隐式迭代

4. jQuery筛选选择器

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

5. 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])	$(".first").prevtAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有则返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”)，index从0开始

6. 排他思想

$(function () {
   
    // 1. 隐式迭代给所有按钮绑定点击事件
    $("button").click(function () {
   
        // 2. 当前元素变化背景颜色
        $(this).css("background", "pink");
        // 3. 其余的兄弟去掉背景颜色，隐式迭代
        $(this).siblings("button").css("background", "");
    })
})

7. 链式编程

上面改变按钮背景颜色的案例，代码可以简写为：

$(this).css("background", "pink").siblings("button").css("background", "");

2. jQuery操作样式

1. css方法

1. 参数值写属性名，则返回属性值；

   $(this).css("color");
   

2. 参数写属性名，属性值，逗号分隔。属性必须加引号，属性值如果是数字可以不用跟单位和引号。

   $(this).css("color","red");
   

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号分隔，属性可以不加引号但是要用驼峰命名法。

   $(this).css("color":"red",
   "font-size":"20px",
   backgroundColor:"blue");
   

2. 类方法

引号里面的类名不要加点。

1. 添加类addClass

   $(this).addClass("current");
   

2. 删除类removeClass

   $(this).removeClass("current");
   

3. 切换类toggleClass

   $(this).toggleClass("current");
   

类操作与className区别

• 原生JS中className会覆盖元素原先里面的类名。
• jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

3. jQuery效果

1. 显示隐藏效果

1. 显示语法

   show([speed,[easing],[fn]])