jquery常用知识

Posted 2021-12-10 老张在线敲代码

jQuery

什么是jq

官网：https://jquery.com/

定义：jquery是一个快速、小型和功能丰富的javascript库。发展历程：2006

特点：

1.隐式迭代
2.链式编程

js使用时的缺点：

1.方法长，不好记忆
2.兼容性不好
3.代码繁琐(可读性低) 遍历 嵌套循环
4.注册事件会被覆盖
5.做动画麻烦

jQuery优点：

1.隐式迭代(偷偷的循环)
2.获取元素方便
3.兼容好
4.实现动画简单
5.注册事件不会被覆盖…

jq版本(1. 2. 3.)国内用1.几，兼容ie6、7、8用1.12以下 根据开发环境 ： 开发环境：自己电脑 250+kb
测试环境：测试机 生产环境：上线后 80kb左右

简单的使用：

1.引入文件
2.入口函数：防止污染全局

js的入口函数：(慢) 页面全加载完
window.οnlοad=function(){}等css，img加载后加载
jQuery的入口函数：(快) 有了结构就可以加载
$(document).ready(function(){})等结构
$(function(){})

jq使用的三步骤：
1.引入jq文件
2.入口函数：防止污染全局
3.功能实现

jq对象和DOM对象的区别：
1.DOM对象：使用js获取的元素就是js中的对象(DOM)
2.jq对象：使用jq的方法获取的对象就是jq对象
3.方法不能互相使用
区别：js对象与jq对象的方法不能混用
联系：DOM与jq可以互相转换
DOM->JQ：$(DOM)
JQ->DOM：lis[索引]/lis.get(索引)

jq与DOM互相转换
DOM转jq：$(DOM) $(lis[0]).text(‘7’);
jq转dom：jqLis[索引] jqLis[0].innerhtml=5;
jqLis.get(1).innerHTML=6;

$符号的实质：
console.log(typeof $);
$ 其实就是一个函数，使用时需要加上()
$的用途：参数不同，功能就不同1.入口函数参数是一个function2.$(DOM) ->把DOM转成JQ对象
3.$(‘li’) 参数string 用来找JQ对象(元素)

jq选择器：

基础选择器
id选择器：KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box'); 类选择器：(’.only’);
元素选择器：${(}^{\prime }l{i}^{\prime });交集并集：并集(我自己有的)：$(‘li.only’).text(‘憨憨憨憨’);
交集 (你有我也有)：$(’#box,.only’).text(‘哈呼呼’);

层级选择器
1.子代选择器：console.log(${(}^{\prime }ul>l{i}^{\prime }));2.后代选择器：console.log($(‘ul li’));

过滤选择器：
获取集合中第一个：${(}^{\prime }li:firs{t}^{\prime }).text{(}^{\prime }我是第一{个}^{\prime });获取集合最后一个：$(‘li:last’).text(‘我是最后一个’);
偶数：${(}^{\prime }ul>li:eve{n}^{\prime }).text("two");奇数：$(‘li:odd’).text(‘one’);
下标：$(‘li:eq(4)’).text(‘444’);
$(‘li’).eq(4).text(‘444’);
被选中 input：:focus
正在执行动画的：:animated
下标大于谁的：:gt(index);
下标小于谁的：:lt(index);
筛选选择器：
siblings()找所有的兄弟(可以传参) (不包含自己)
children()找子级元素 (可以传参)
find()后代 (可以传参)
next()下一个同级
parent()父级
prev()上一个同级
index()索引值

js怎么操作样式：
1.行间样式 style
2.class 改变类

jq中的样式操作：
设置样式返回的是jq对象 .text();
获取返回的是对应的属性值 24px.text();
css() 一个参数可以获取样式(string)，设置单个样式(string,string)，设置多个样式({’’:’’,’’:’’})
获取集合样式时只返回第一个的样式值

class操作：
$(‘div’).addClass(‘abc xyz’); 添加
${(}^{\prime }di{v}^{\prime }).removeClass{(}^{\prime }xy{z}^{\prime });移除classconsole.log($(‘div’).hasClass(‘xyz’)); 判断有无某个类 返回 return/false
$(‘div’).toggleClass(‘abc’); 切换类，没有就加上，有就移除

属性操作：
可以自定义：
attr(’’,’’)
attr({’’:’’,’’:’’})
只是自带属性：
//注意：jq1.6版本以后有变化
//对于属性值为布尔值的 checked/selected/checkbox
//用prop

动画：
-显示隐藏：
-显示：show(speed) speed速度
1.fast 快 200ms
2.normal 正常 400ms 默认参数
3.slow 慢 600ms show(‘slow’)
4.可以传参数 show(1000)
–使用方法：
1.show()最常用
2.show(speed)
3.show(speed,callback) callback回调函数
4.show(callback)
-隐藏：hide()
-滑入滑出：
-滑入：slideDown(speed)
1.fast 快 200ms
2.normal 正常 400ms 默认参数
3.slow 慢 600ms slideDown(‘slow’)
4.可以传参数 slideDown(1000)
–使用方法：
1.slideDown()最常用
2.slideDown(speed)
3.slideDown(speed,callback) callback回调函数
4.slideDown(callback)
-滑出：slideUp()
-切换：slideToggle()
-淡入淡出：
-淡入：fadeIn()
-淡出：fadeOut()
-切换：fadeToggle()

动画序列：
优点：只要设置了就会执行
缺点：耽误时间
停止动画序列：stop()
参数：
1.是否清空动画序列 默认false
2.是否跳转到当前动画的最终效果 默认false

自定义动画：
animate({‘left’:‘400px’},1000,linear,callback) callback回调函数
参数：
1.属性集合
2.speed
3.效果
4.回调函数

swing 摇摆-慢快慢 默认
linear 直线-匀速
js可以进行多个动画：轮转时间片

节点操作：
添加：
${(}^{\prime }di{v}^{\prime }).append($a);//在元素尾部添加
${(}^{\prime }di{v}^{\prime }).prepend($a);//在元素头部添加
${(}^{\prime }{p}^{\prime }).appendTo($(‘div’));//将当前元素添加到目标元素尾部，返回p
${(}^{\prime }{p}^{\prime }).prependTo($(‘div’));//将当前元素添加到目标元素头部，返回p
${(}^{\prime }di{v}^{\prime }).after($a);//给自己后面添加
${(}^{\prime }di{v}^{\prime }).before($a);//给自己前面添加

删除：
$(‘div’).html(’’)//innerHtml一样，’'的话就清空
$(‘div’).empty();//清空元素
$(‘div’).remove();//删除自己

克隆节点：
$(‘div’).clone();//克隆节点(深度的)
传boolean值 false不带事件(默认)，true带事件

text() 获取文本内容 添加内容(纯文本)
html() 获取元素(文本)内容 添加元素(元素+文本)
val() 获取输入内容 添加输入框内容

jq的事件机制(语法简单，能力强大)
1.简单的注册(一次只能注册一个事件)
优点：简单，直观
缺点：不能注册多个事件

2.bind(不能给新创建的元素添加事件)
优点：一次注册多个事件
缺点：不能给新创建的元素添加事件
unbind() 解除事件绑定
不传参数 全部解除
传click 只解除click事件

3.delegate(事件委托：事件冒泡+事件源对象)
优点：可以给新创建的元素绑定事件
缺点：不能一次注册多个事件
delegate(‘委托给谁’,‘事件名称’,‘事件处理函数’)
undelegate() 解除事件绑定

4.on on=delegate+bind
on(‘事件类型’,‘事件的执行者’,‘传递的数据’,‘处理函数’)
off 解除绑定

如何给事件解除绑定：
1.bind unbind
2.delegate undelegate
3.on off
clientX clientY 距离页面左上角的距离
pageX pageY 距离页面左上角的距离(包含滚动条)
screenX screenY距离屏幕左上角的距离

e.data on方式绑定事件传输的数据，由此方式接收
e.keyCode 获取按下键盘的代码

阻止冒泡：
e.stopPropagation();
return false;
阻止默认事件：
e.preventDefault();
return false;

事件触发：
$(‘div’).click() 直接调用事件，不传参，就是让事件执行
$(‘a’).triggle(‘click’) 事件触发

each(index,elem)规定为每个匹配元素规定运行的函数。
1.index 元素索引
2.element 元素本身 (js DOM对象–需要转换成为jq对象才能使用jq方法)
end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。
nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的。

$ 冲突，如果$被占用，$就换成jQuery，如果都被占用，var $$=$.noConflict();

自己为jq增加添加方法：
1.$.prototype.xxx=function()2.$.fn.xxx=function(){} (推荐)

var i=1;
	function a(){
		i++;
		function b(){
			var i=3;		
			console.log(window.i)
		}
		b();
	}
	window.a();
	console.log(this.i)