jQuery
Posted hjysunshine
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。
1、原生js和jQuery入口函数的加载模式不同
1）原生js 会等到DOM元素加载完毕，并且图片也加载完毕才会执行；
2）jQuery会等到DOM元素加载完毕，但不会等到图片加载完成就会执行。
//写在head标签里
原生javascript的固定写法
window.onload = function() {
var img = document.getElementsByTagName(‘img‘)[0];
console.log(img);
var width = window.getComputedStyle(img).width;
console.log("原生js",width);
}
jquery的固定写法
$(document).ready(function() {
var $img = $("img");
console.log($img);
var $width = $img.width();
console.log("jq",$width);
});
2、原生js如果编写了多个入口函数，后面编写的会覆盖前面编写的，且只执行一遍
jQuery如果编写了多个入口函数，后面编写的不会覆盖前面编写的，有多少个入口函数，就执行多少遍
3、jQuery入口函数的四种写法
第一种：
$(document).ready(function() {
alert(‘hello‘);
})
第二种 ：
jQuery(document).ready(function() {
alert(‘hello‘);
})
第三种：（推荐）
$(function() {
alert(‘hello‘);
})
第四种：
jQuery(function() {
alert(‘hello‘);
})
4、jQuery冲突问题
如果引入的其他js文件中也存在 $ 符号，就会与jQuery的 $ 符号产生冲突，谁引入在后，就用谁的：
如：
<script src="./js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/test.js" type="text/javascript" charset="utf-8"></script>
test.js里 : var $ = ‘aa‘; console.log($);
$(function() { //这里会报错
console.log(‘bb‘);
})
最后打印的是 aa
解决方法：
1）释放 $ 的使用权
jQuery.noConflict();
注意点：释放操作必须在编写其他jQuery代码之前编写
释放之后就不能再使用$,改为使用 jQuery
jQuery.noConflict();
jQuery(function() {
console.log(‘bb‘);
})；
2）自定义一个访问符号
var nj = jQuery.noConflict();
nj(function() {
console.log(‘bb‘);
})；
5、jQuery核心函数
$(); 就代表调用jQuery核心函数
1）接收一个函数
$(function() {
console.log(‘aa‘);
})
2）接收一个字符串
2.1接收一个字符串选择器
返回一个jQuery对象，对象中保存了找到的DOM 元素
$(function() {
var $box1 = $(‘.box1‘);
var $box2 = $(‘#box2‘);
console.log($box1);
console.log($box2);
})
2.2接收一个代码片段
返回一个jQuery对象，对象中保存了创建的DOM元素
$(function() {
var $p = $("<p>我是p元素</p>")
console.log($p);
var $box1 = $(‘.box1‘);
$box1.append($p); //<div class=”box1”><p>我是p元素</p></div>
})
2.3接收一个DOM元素
会把原生的DOM元素包装成一个jQuery对象
<span></span>
$(function() {
var span = document.getElementsByTagName(‘span‘)[0];
console.log(span);
var $span = $(span);
console.log($span);
})
6、jQuery对象
jQuery对象是一个伪数组
什么是伪数组：有0到length-1的属性，并且具有length属性
7、静态方法和实例方法
function AClass() {}
1）给类添加一个静态方法（直接添加给类的就是静态方法）
AClass.staticMethod = function() {
alert(‘staticMethod‘);
}
静态方法通过类名调用
AClass.staticMethod();
2）给这个类添加一个实例方法：
AClass.prototype.instanceMethod = function() {
alert(‘instanceMethod‘);
}
通过实例调用实例方法
var aclass = new AClass();
aclass.instanceMethod();
8、静态方法each()
var arr = [1,3,5,7,9];
var obj = {0:1, 1: 3, 2: 5, 3: 7, 4:9, lenght:5};
(1) 原生的forEach方法只能遍历数组，不能遍历伪数组
arr.forEach(function(value, index) {
console.log(index, value);
})
obj.forEach(function(value, index) { //报错，obj.forEach is not a function
console.log(index, value);
})
(2) 利用jQuery的each静态方法遍历数组和伪数组
$.each(arr, function(index, value) {
console.log(index, value);
})
$.each(obj, function(index, value) {
console.log(index, value);
})
9、静态方法map()
var arr = [1, 3, 5, 7, 9];
var obj = {
0: 1,
1: 3,
2: 5,
3: 7,
4: 9,
lenght: 5,
"push": Array.prototype.push,
"splice": Array.prototype.splice,
};
原生的map方法只能遍历数组，不能遍历伪数组
/*array为当前被遍历的数组*/
arr.map(function(value, index, array) {
console.log(index, value, array);
})
利用jQuery的map静态方法遍历数组和伪数组
$.map(arr, function(index, value) {
console.log(index, value);
})
$.map(obj, function(index, value) {
console.log(index, value);
})
10、 jQuery中的each静态方法和map静态方法的区别：
each静态方法默认的返回值就是，遍历谁就返回谁
map静态方法默认的返回值是一个空数组
如下：
var $map = $.map(arr, function(index, value) {
})
console.log($map)
var $map1 = $.map(obj, function(index, value) {
})
console.log($map1)
each静态方法不支持在回调函数中对数组进行处理
map静态方法可以在回调函数中通过return 对遍历的数组进行处理
然后生成一个新的数组
var $map = $.map(arr, function(index, value) {
return index + value;
})
console.log($map)
var $map1 = $.map(obj, function(index, value) {
return index + value;
})
console.log($map1)
11、jQuery其他静态方法
（1）$.trim();
作用：去除字符串两端的空格
参数：需要去除两端空格的字符串
返回值：去除空格后的字符串，不改变原来的字符串
var str = ‘ hjy ‘;
var res = $.trim(str);
（2）$.isWindow();
作用：判断传入的对象是否是window对象
返回值：true/false
var w = window;
var res = $.isWindow(w);
console.log(res); true
（3）$.isWindow();
作用：判断传入的对象是否是真数组（伪数组为false）
返回值：true/false
（4）$.isFunction();
作用：判断传入的对象是否是函数
返回值：true/false
注意点：jQuery框架本质上是一个函数
var res = $.isFunction(jQuery);
console.log(res); //true
（5）$.holdReady(true/false)
作用：暂停ready执行
12、jQuery内容选择器
（1）:empty
作用：找到既没有文本内容也没有子元素的指定元素（没有任何子节点）
$(“div:empty”);
（2）:parent
作用：选取所有包含子节点或文本节点的父元素。
:parent 与 :empty 相反。
需要注意的一件重要的事情是 :parent (和 :empty) 所涉及的子元素，包括文本节点。
（3） :contains(text): 找到包含指定文本内容的元素
$("div:contains(‘ffff‘)")
（4） :has(selector): 找到包含指定子元素的元素
$("div:has(‘p‘)");
13、属性和属性节点
1）什么是属性
对象身上保存的变量就是属性
2）如何操作属性
对象.属性名称 = 值；
对象.属性名称;
对象[“属性名称”] = 值；
对象[“属性名称”]；
3）什么是属性节点
<span name=”it666”></span>
在编写html代码时，在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后，展开看到的都是属性
在attributes属性中的所有内容都是属性节点
4）如何操作属性节点
Dom元素.setAttribute(“属性名称”,”值”)
Dom元素.getAttribute(“属性名称”);
5）属性和属性节点有什么区别
任何对象都有属性，但是只有DOm对象才有属性节点
14、attr、removeAttr、prop、removeProp方法
1、attr(name|pro|key, val|fn)
$(‘p‘).attr(‘name‘,‘woaini‘)
作用：获取或者设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果 传递一个参数，代表获取属性节点的值
如果传递两个参数，代表设置属性节点的值
注意点：
如果是获取：无论找到多少个元素 ，都只会返回第一个元素指定的属性节点的值。
如果是设置：找到多少个元素就会设置多少个元素。
如果是设置：如果设置的属性节点不存在，那么系统会自动新增
2、removeAttr()：删除属性节点
删除一个：$(‘p‘).removeAttr(‘name‘)
删除多个：$(‘div‘).removeAttr(‘name class‘)
注意点：
会删除所有找到元素指定的属性节点
3、prop 和 attr一样
4、removeProp 和 removeAttr 一样
区别：removeProp 去除属性节点时并不是真的去除，而是把属性节点=‘undefined’
removeAttr 去除 class 是真的去除
5、prop 和 attr 何时使用
console.log($(‘input‘).prop(‘checked‘)) //true / false
console.log($(‘input‘).attr(‘checked‘)) // checked / undefined
官方推荐：在操作属性节点时，具有true 和 false 两个属性的属性节点，如 checked、selected、
disabled，使用prop, 其他使用attr
15、操作class相关的方法
1、addClass(‘class’):添加一个类，如果要添加多个，多个类名之间用空格隔开即可
2、removeClass(‘class’):删除一个类，如果要删除多个，多个类名之间用空格隔开即可
3、toggleClass(‘class’): 有就删除，没有就添加
16、文本值得相关操作
（1）设置HTML：$(‘div‘).html(‘<p>我是p元素<span>我是span元素</span></p>‘);
（2）获取HTML：$(‘div‘).html();
（3）设置TEXT：$(‘div‘).text(‘<p>我是p元素<span>我是span元素</span></p>‘)
（4）获取TEXT：$(‘div‘).text();
（5）设置input的value：$(‘input‘).val(‘请输入内容‘);
（6）获取input的value：$(‘input‘).val();
17、操作css样式的方法
（1）逐个设置
$(‘div‘).css(‘width‘,‘100px‘);
$(‘div‘).css(‘height‘,‘200px‘);
$(‘div‘).css(‘background-color‘, ‘#ff0000‘);
（2）链式设置
$(‘div‘).css(‘width‘,‘100px‘).css(‘height‘,‘200px‘).css(‘background-color‘, ‘#00ff00‘);
注意点：如果超过三个，建议采用批量设置
（3）批量设置
$(‘div‘).css({
width : ‘100px‘,
height : ‘200px‘,
backgroundColor : ‘#0000ff‘
});
注意点：对象里的样式名采用的是小驼峰写法
（4）获取css样式
$(‘div‘).css(‘background-color‘);
18、尺寸和位置的操作
（1）$(‘div‘).width()：获取元素的宽度，width值
$(‘div‘).width(200)：设置元素的宽度
（2）$(‘div‘).height()：获取元素的高度，height值
$(‘div‘).height(200)：设置元素的高度
（3）$(‘div‘).offset().left/right/top/bottom：获取元素距离窗口的偏移位
$(‘div‘).offset({ ：设置元素距离窗口的偏移位
left : 10
})
$(‘div‘).offset() 获取到的是一个对象 {top:8, left:8}
（5）$(‘div‘).position().left/right/top/bottom：获取元素距离定位元素的偏移位
$(‘div‘).position() 获取到的是一个对象 {top:8, left:8}
不可以设置值
19、scrollTop方法
$(‘div‘).scrollTop()：获取滚动的偏移位
$(‘div‘).scrollTop(300) ：设置滚动的偏移位
获取网页滚动的偏移位：
$(‘html‘).scrollTop() 非IE
$(‘html‘).scrollTop() IE
解决兼容性：$(‘html‘).scrollTop() + $(‘html‘).scrollTop()
设置网页滚动的偏移位：
兼容的：$(‘html, body‘).scrollTop(300)
20、事件绑定
（1）eventName(fn):
$(‘button‘).click(function() {})
编码效率略高/部分事件jQuery没有实现
（2）on(eventName, fn):
$(‘button‘).on(‘click‘, function() {})
编码效率略低/ 所有js 事件都可以添加
注意点：可以添加多个相同或者不同的事件，而且不会覆盖
（3）.off() : 移除事件
如果不传递参数，会移除所有的事件
如果传递一个参数，会移除所有指定类型的事件
$(‘button‘).off(‘click‘); // 会移除所有click事件
21、事件冒泡和默认行为
事件冒泡：点击子元素会冒泡到父元素
阻止事件冒泡：
在子元素事件中添加：
return false；或者 event.stopPropagation();
$(‘son‘).click(function(event) {
return false;
event.stopPropagation();
})
默认事件：a标签跳转，form表单提交跳转等
阻止默认事件：
$(‘a‘).click(function(event) {
return false;
event.preventDefault();
})
22、事件自动触发
（1）$(‘son’).trigger(‘click’);
（2）$(‘son’).triggerHandler(‘click’);
trigger：如果利用trigger自动触发事件，会触发事件冒泡
triggerHandler ：如果利用triggerHandler自动触发事件，不会触发事件冒泡
（3）$(‘input[type=’submit’]’).trigger(‘click’); //会触发默认行为
（4）$(‘input[type=’submit’]’).triggerHandler(‘click’); //不会触发默认行为
（5）用trigger自动触发a的事件，且触发默认行为
$(document).ready(function() {
$(‘span‘).click(function(){
console.log(‘aa‘);
})
$(‘span‘).trigger(‘click‘);
});
<a href="https://www.baidu.com/"><span>百度</span></a>
23、自定义事件
想要自定义事件，必须满足两个条件
1、事件必须是通过on绑定的
2、事件必须通过trigger来触发
$(‘.aa‘).on(‘myClick‘,function(){
console.log(‘aa‘);
})
$(‘.aa‘).trigger(‘myClick‘);
24、事件命名空间
想要事件的命名空间有效，必须满足两个条件
1、事件必须是通过on绑定的
2、事件必须通过trigger来触发
$(‘.aa‘).on(‘click.la‘,function(){
console.log(‘aa‘);
})
$(‘.aa‘).on(‘click.lb‘,function(){
console.log(‘bb‘);
})
$(‘.aa‘).trigger(‘click.la‘);
自动触发 click.la 事件，点击aa元素时，两个事件会触发
3、利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，
而父元素没有命名空间的事件不会被触发
$(‘.father‘).on(‘click.la‘,function(){
console.log(‘father.la‘);
})
$(‘.father‘).on(‘click‘,function(){
console.log(‘father‘);
})
$(‘.son‘).on(‘click.la‘, function() {
console.log(‘son.la‘)
})
$(‘.son‘).trigger(‘click.la‘);
自动打印：son.la father.la
4、利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和
父元素所有相同类型的事件都会被触发
$(‘.father‘).on(‘click.la‘,function(){
console.log(‘father.la‘);
})
$(‘.father‘).on(‘click‘,function(){
console.log(‘father‘);
})
$(‘.son‘).on(‘click.la‘, function() {
console.log(‘son.la‘)
})
$(‘.son‘).trigger(‘click‘);
25、事件委托
jQuery中，如果通过核心函数找到的元素不止一个。那么在添加事件的时候，会给所有元素添加事件。
因为jQuery入口函数是在DOM元素加载完成后就执行，通过button事件新增的li 就不会有事件
解决方法：
.delegate()
$(‘ul‘).delegate(‘li‘, ‘click‘,function() {
console.log($(this).html());
})
例子：点击a 标签，弹出一个框，点击关闭，框关闭
$(function() {
$(‘a‘).click(function() {
var $mask = $(`<div class="mask">
<div class="login">
<span></span>
</div>
</div>`);
$(‘body‘).append($mask);
$(‘body‘).delegate(‘.login>span‘,‘click‘,function() {
$mask.remove();
})
return false;
})
});
26、移入移出事件
（1）mouseover、mouseout
当子元素移入移出，会触发父元素的事件 移入父元素、移入子元素、移出子元素、移出父元素
$(‘.container‘).mouseover(function() {
console.log(‘移入‘);
})
$(‘.container‘).mouseout(function() {
console.log(‘移出‘);
})
（2）mouseenter、mouseleave
当子元素移入移出，不会触发父元素的事件
$(‘.container‘).mouseenter(function() {
console.log(‘移入‘);
})
$(‘.container‘).mouseleave(function() {
console.log(‘移出‘);
})
（3) hover
当只有一个回调函数时，移入移出触发的是同一个事件（不会冒泡）：
$(‘.container‘).hover(function() {
console.log(‘移入‘);
})
当有两个回调函数时，分别是移入移出两个事件（不会冒泡）：
$(‘.container‘).hover(function() {
console.log(‘移入‘);
}, function() {
console.log(‘移出‘)
})
27、siblings() 、eq()
$(‘.tabImg>li‘).eq(index).siblings().removeClass(‘show‘);
28、显示隐藏动画
（1）show(time, fn); time为动画显示时间， fn 动画结束后执行
（2）hide(time, fn); time为动画隐藏时间， fn 动画结束后执行
（3）toggle(time, fn); 若显示，则隐藏，若隐藏，则显示。time为动画切换时间， fn 动画结束后执行
$(‘button‘).eq(0).click(function() {
$(‘.box‘).show(1000,function() {
alert(‘显示‘);
})
})
$(‘button‘).eq(1).click(function() {
$(‘.box‘).hide(1000,function() {
alert(‘隐藏‘);
})
})
$(‘button‘).eq(2).click(function() {
$(‘.box‘).toggle(1000,function() {
alert(‘ohyeah‘);
})
})
29、对联广告
$(function() {
$(window).scroll(function() {
var $space = $(‘html, body‘).scrollTop();
if($space >= 500) {
$(‘div‘).show(1000);
}else {
$(‘div‘).hide(1000);
}
})
})
30、滚动条、滚动条滚动距离
$(window).scroll(function() {}） ： 滚动条一滚动就会触发事件
$(‘html, body‘).scrollTop(); ：获取滚动条滚动距离
31、展开、收起动画
$(‘button‘).eq(0).click(function() {
$(‘.div‘).slideDown(1000);
})
$(‘button‘).eq(1).click(function() {
$(‘.div‘).slideUp(1000);
})
$(‘button‘).eq(2).click(function() {
$(‘.div‘).slideToggle(1000);
})
32、折叠菜单
siblings() ：兄弟节点
children() : 儿子节点
$(function() {
$(‘.navOne>li‘).click(function() {
$(this).children(‘.navTwo‘).slideDown(1000);
$(this).siblings().children(‘.navTwo‘).slideUp(1000);
$(this).children(‘span‘).addClass(‘rotate‘);
$(this).siblings().children(‘span‘).removeClass(‘rotate‘);
})
})
33、下拉菜单
stop() 停止当前正在运行的动画
$(function() {
$(‘.navOne>li‘).mouseenter(function() {
var navTwo = $(this).children(‘.navTwo‘);
navTwo.stop();
navTwo.slideDown(1000);
})
$(‘.navOne>li‘).mouseleave(function() {
var navTwo = $(this).children(‘.navTwo‘);
navTwo.stop();
navTwo.slideUp(1000);
})
})
34、淡入淡出
fadeIn(time, fn); 淡入
fadeOut(time, fn); 淡出
fadeToggle(time, fn); 切换淡入淡出
fadeTo(time, opacity, fn); 淡入到opacity的透明度就会停止
35、$(selector).animate(styles, speed, easing, callback)
第一个参数：接收一个对象，可以在对象里修改属性
第二个参数：指定动画时长
第三个参数：指定动画节奏，"swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动
第四个参数：动画执行完后的回调函数
$(‘.ad‘).animate({
width : ‘400px‘,
height: ‘500px‘,
opacity : 0
}, 1000, ‘swing‘, function() {
console.log(‘完成‘)；
})
累加属性：
$(‘.ad‘).animate({
width : ‘+=200‘,
}, 1000, ‘swing‘, function() {
console.log(‘完成‘)；
})
关键字属性：
$(‘.ad‘).animate({
width : ‘hide‘, //toggle
}, 1000, ‘swing‘, function() {
console.log(‘完成‘);
})
链式调用，先执行前面再执行后面：
$(‘.ad‘).animate({
width: ‘400‘
}, 1000, ‘swing‘).animate({
height: ‘400‘
}, 1000, ‘swing‘)
36、stop() 和 delay() 方法
（1）delay(time) ： $(‘.ad‘).animate({
width: ‘400‘
}, 1000, ‘swing‘).delay(3000).animate({ //延迟3秒后再执行下一个动画
height: ‘400‘
}, 1000, ‘swing‘)
（2）stop()
1）立即停止当前动画，继续执行后续动画
$(‘.ad‘).stop();
$(‘.ad‘).stop(false);
$(‘.ad‘).stop(false,false);
2）立即停止当前的和后续所有的动画
$(‘.ad‘).stop(true,false);
$(‘.ad‘).stop(true);
3）立即完成当前动画，继续执行后续动画
$(‘.ad‘).stop(false,true);
4）立即完成当前动画, 停止后续所有的动画
$(‘.ad‘).stop(true,true);
以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章