jQuery

j就是 JavaScript;Query 查询; 意思就是查询js,把js中的DOM操作做了封装

版本介绍

1x :兼容 IE 678 等低版本浏览器, 官网不再更新

2x :不兼容 IE 678 等低版本浏览器, 官网不再更新

3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本

基本操作

入口函数

$(function () {    ....});

不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码

window.onload 和 $(function) 区别

jQuery中的顶级对象$

$是 jQuery 的别称,在代码中可以使用 jQuery 代替

$是jQuery的顶级对象,相当于原生JavaScript中的 window

  1. 用原生 JS 获取来的对象就是 DOM 对象

  2. jQuery 方法获取的元素就是 jQuery 对象。

  3. jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)

  4. jq对象 -- > dom对象 : jq对象[索引] 或者 jq对象.get(索引)

var domObject1 = $('div')[0]var domObject2 = $('div').get(0)
var jQueryObject = $(box);

事件绑定

$("div").click(function () {    alert("click");});

选择器

类型语法作用

标签选择器(元素选择器) | $("html标签名") | 获得所有匹配标签名称的元素ID选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素类选择器 | $(".class的属性值") | 获得与指定的class属性值匹配的元素并集选择器 | $("选择器1,选择器2....") | 获取多个选择器选中的所有元素交集选择器 | $("li.current") | 交集元素

后代选择器 | $("A B ") | 选择A元素内部的所有B元素子选择器 | $("A > B") | 选择A元素内部的所有B子元素

属性名称选择器 | $("A[属性名]") | 包含指定属性的选择器属性选择器 | $("A[属性名='值']") | 包含指定属性等于指定值的选择器符合属性选择器 | $("A[属性名='值'][]...") | 包含多个属性条件的选择器

过滤选择器 | :first | 获得选择的元素中的第一个元素尾选择器 | :last | 获得选择的元素中的最后一个元素非元素选择器 | :not(selector) | 不包括指定内容的元素偶数选择器 | :even | 偶数,从 0 开始计数奇数选择器 | :odd | 奇数,从 0 开始计数等于索引选择器 | :eq(index) | 指定索引元素大于索引选择器 | :gt(index) | 大于指定索引元素小于索引选择器 | :lt(index) | 小于指定索引元素标题选择器 | :header | 获得标题(h1~h6)元素,固定写法可用元素选择器 | :enabled | 获得可用元素不可用元素选择器 | :disabled | 获得不可用元素选中选择器 | :checked | 获得单选/复选框选中的元素选中选择器 | :selected | 获得下拉框选中的元素

一些节点选择的辅助方法:

202002231554

$('div').hide();  // 页面中所有的div全部隐藏,不用循环操作

样式控制

// 1.参数只写属性名,则是返回属性值var strColor = $(this).css('color');// 2.  参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号$(this).css("color", "red");// 3.  参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号$(this).css({ "color":"white","font-size":"20px"});

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

// 1.添加类$("div").addClass("current");// 2.删除类$("div").removeClass("current");// 3.切换类$("div").toggleClass("current");

DOM操作

内容操作

<a><font>内容</font></a>
$("a").html(); // <font>内容</font>
<a><font>内容</font></a>
$("a").text(); // 内容

属性操作

var link = $("div").prop('index'); // 获取自定义属性$("div").prop('index','xx'); // 设置自定义属性
var link = $("div").prop('href'); // 获取属性$("div").prop('href','xx'); // 设置属性
$("div").data("key","value") //向元素添加数据$("div").data("key") //获取添加的数据

节点操作

动画

参数:

显示隐藏

滑入滑出

淡入淡出

自定义动画

params代表要变化的css样式

$("div").animate({height:200})

动画排队

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行

元素操作

遍历

$("div").each(function (index,element) {    console.table(index,element);});

回调方法传入的element是dom元素

如果当前function返回为false,则结束循环(break)。

如果当前function返回为true,则结束本次循环,继续下次循环(continue)

$.each($("div"),function (i, e) {    console.table(i,e);})

ES6语法

for (let i of $("div")){  console.log(i);}

事件

事件绑定

标准绑定

jq对象.事件方法(回调函数),如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。

on绑定

jq对象.on("事件名称",回调函数)

或者

  jq对象.on({  事件1:处理函数,  事件2:处理函数})
// 事件触发一次后失效jq对象.one('click',fn)

事件委托

$("div").on("click","p",function(){  // 将子元素发生的事件委托给父元素,这样就可以实现给动态创建的元素创建点击事件  alert('p元素触发');})

事件解绑

// 解绑某个事件jq对象.off("事件名称")// 解绑所有事件jq对象.off()// 解绑事件委托jq对象.off('click','a')

事件触发

jq对象.trigger("click")// 不会触发元素的默认行为(比如input focus之后会光标闪烁,使用这个方法光标就不会闪烁)jq对象.triggerHandler("click")

事件对象

与DOM中的event基本一致

对象拷贝

$.extend([deep],target,sourceObject,[sourceObjectN])

多库共存

// 让jquery 释放对$ 控制权 让用自己决定var $x = jQuery.noConflict();

尺寸和位置操作

// width height 获取或者设置$("div").width();// innerWidth innerHeight 包含padding$("div").outerWidth();// outerWidth outerHeight 包含padding、border,加上参数true就包含margin$("div").outerWidth();
// 绝对定位的偏移$("div").offset()// 设置$("div").offset({  top:0,  left:0})// 获取相对于父级定位盒子的偏移,只能获取不能设置$("div").position()// 设置或者获取被卷去的头部$("div").scrollTop()// 设置或者获取被卷去的左部$("div").scrollLeft()