JQuery的使用
jQuery的四种写法
- $(document).ready(function({});
- jQuery(document).ready(function({});
- $(function({});
- jQuery(function({});
多个jQuery的冲突问题
使用多个$符号会造成jQuery的冲突
解决方法：
1，释放$的使用权：使用“jQuery.noConflick()”;将$符号改成jQuery；
jQuery.noConflict();
jQuery(function () {
})
注意点：释放操作必须使用在其他jQuery之前，释放之后不能使用$操作，改为jQuery；
2，自定义符号； var XXX=jQuery.noConflick()；用xxx代替jQuery的写法；
var xxx = jQuery.noConflict();
xxx(function () {
})
JQ的核心函数
1，$();就是jQuery的核心函数；
（）内可接收的内容有：
- 一个函数
- 一个字符串： 1），接收一个字符串选择器
var $xx = $('#xxx');
2,接收一个代码片段
var $xx = $('<p>xxxxxxxxxx</p>');
3.接收一个dom元素；
jQuery的本质
jQuery的本质是一个伪数组（具有数组的索引值，有length属性）；
静态方法和实例方法
- 静态方法通过类名调用；
function AClass(){ }; AClass.staticMethod=function(){ alter(xxx); }; AClass.staticMethod();
- 实例方法通过类的实例调用；
function AClass(){ }; AClass.prototype.instanceMethod=function(){ alter(xxx); }; var a = new AClass(); a.instanceMethod();
利用jQuery的each静态方法遍历数组
arr=[1,3,5,7,9,]；
obj={0:1,1:3,2:5,3:7，length：4}
$.each(arr,function(index,value){
console.log(index,value);
});
注意点：
- jQuery的each方法可以遍历数组也可以遍历伪数组（例如：obj对象）；
- 原生的JS的foreach只能遍历数组，不能遍历伪数组；
//原生JS的forEach方法：不能遍历伪数组； arr=[1,3,5,7,9,]； obj={0:1,1:3,2:5,3:7，length：4}； //可行 arr.forEach(function(value,index){ console.log(value,index); }); //不可行 obj.forEach(function(value,index){ console.log(value,index); });
利用jQuery的map静态方法遍历数组
arr=[1,3,5,7,9,]；
obj={0:1,1:3,2:5,3:7，length：4}
$.each(arr,function(index,value){
console.log(index,value);
});
注意点：
- jQuery的map方法可以遍历数组也可以遍历伪数组（例如：obj对象）；
- 原生的JS的map只能遍历数组，不能遍历伪数组
//原生JS的map方法：不能遍历伪数组； arr=[1,3,5,7,9,]； obj={0:1,1:3,2:5,3:7，length：4}； //可行 arr.map(function(value,index){ console.log(value,index); }); //不可行 obj.map(function(value,index){ console.log(value,index); });
jQuery中each与map的区别
- each静态方法遍历谁返回谁，map返回空数组；
- each不支持在回调函数中对遍历数组进行处理，map支持在回调函数中通过return对遍历数组进行处理生成新的数组；
其他遍历方法
$.trim方法：
str =" iii ";
var a = $.trim(str);
console.log(a);
$.trim作用：去掉字符串前后两端的空格
$.inWindow（）方法:
- 作用：判断传入的对象是否是window上的值
- 返回值：true，false（需要定义一个值进行接收）
$.isArray()方法:
- 作用：判断传入的对象是否是真数组；
- 返回值：true，false（需要定义一个值进行接收）
$.isfunction()方法:
- 作用：判断传入的对象是否是函数；
- 返回值：true，false（需要定义一个值进行接收）
- jQuery框架本质是一个函数（立即执行函数）
$.holdready()方法:
作用：暂停ready的执行；
$.holdready(true);
$(document).ready(function(){
console.log(xxxx);
});
内容选择器
- ：empty：找到符合元素没有文本或者没有子元素的空元素
var $xxx = $('xxx:empty')
- ：parent：找到符合元素有文本或者有子元素的元素
var $xxx = $('xxx:parent')； - ：contains(xxxx):找到符合元素包含后面文本内容的元素；
var $xxx = $('xxx:contains(xxxx)')； - :has(selector):找到符合条件的包含括号内元素的元素；
var $xxx = $('xxx:has(selector)')；
属性节点
什么是属性节点：
- 在HTML标签中添加的属性叫做属性节点；
- 所有的属性节点都保存在DOM元素的attributes的属性中；
如何操作属性节点：
- 设置属性节点：DOM元素.setAttruction('属性名'，'属性值')；
- 获取属性节点：DOM元素.getAttruction('属性名')；
属性与属性节点的区别
- 任何对象都有属性，只有DOM元素才有属性节点；
Attr方法的使用
格式：$('xxx').attr('xxx','xxx')
- 当为一个参数时，表示获取该属性节点的值；若符合条件的有多个值时，只会返回第一个属性的值
- 当为两个参数时，表示设置该属性节点的值；有多少个属性就会改变多少个属性值；若设置的属性不存在，系统会自动新增一个元素；
removeAttr（'a b'）————>只能传递一个参数，若要传递多个参数，用空格隔开
prop使用方法与Attr用法相似
不仅可以操作属性，还可以操作属性节点；
官方推荐在使用属性节点时，具有true和false的属性和属性节点，例如：selected，checked，disabled建议使用prop（），其他的使用attr();
CSS类属性
l. addClass(class | fn)
作用:添加一个类；如果要添加多个，多个类名之间用空格隔开即可
- removeClass([class |fn])
作用：删除一个类；如果想删除多个，多个类名之间用空格隔开即可
- toggleClass(class | fn[, sw] )
作用：切换类；有就删除，没有就添加
文本属性
- html();
- text();
- value();
jQuery操作CSS样式
- 逐个设置
javascript $('div').css('width','100px'); $('div').css('height','100px'); $('div').css('background','red');
- 链式设置————(建议不超过3个)
javascript $('div').css('width','100px').css('height','100px').css('background','red');
- 批量设置
javascript $('div').css({ width:100px, height:100px, background:red; });
获取宽高和尺寸位置的操作
offset()：获取元素距离窗口的偏移量；可以查询也可以设置
position()：获取元素距离定位元素的偏移量；可以查询但不可以设置
scrollTop():获取滚动条的移动量；
当主题参数为表示网页时，为了实现不同版本的兼容性，需要使用：
$('html').scrollTop()+ $('body').scrollTop();
事件绑定：
可以添加多个相同或者不相同的事件，并且彼此之间不会被覆盖；
解除事件绑定————off（）
当没有参数时，表示绑定的事件全部解除；
当有一个参数时，表示解除全部符合条件的事件；
当有两个参数时，表示解除指定的事件的符合后面参数的事件；
jQuery事件冒泡和默认行为
什么是事件冒泡
如何阻止事件冒泡：
在不需要事件冒泡的子元素中添加return false
$('.father').on('click',function(){
alert('hello world!')
})
$('.son').on('click',function(event){
alert('hello nihao !')
// return false; 方法一
// event.stopPropagation(); 方法二
})
如何阻止默认行为： event.preventDefault();或者 return false; ；
自动触发事件：
$('.father').on('click', function () {
alert('hello world!');
})
$('.father').trigger('click');
//或者$('.father').triggerHandler('click');
trigger和triggerHandler的区别
使用子元素使用trigger，会触发事件冒泡与默认行为；
使用triggerHandler不会触发事件冒泡与默认行为；
当a元素使用triggerHandler时，不会阻止默认行为，需要对a元素进行包装，用span元素把a元素的内部内容包围起来
自定义事件的满足条件：
只能用on('click',function(){})形式，不能用click（functional（）｛｝）形式；
需要使用tragger，triggerHandler进行自动触发事件；
事件命名空间
想要事件命名空间有效，需要满足两个条件：
- 必须使用on调用事件函数；
- 必须使用tragger或者traggerHandler进行自动触发；
javascript $('.son').on('click.zs', function () { alert('hello world!') }) $('.son').on('click.ls', function () { alert('hello !') }) $('.son').trigger('click.zs');
命名空间面试题
利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
$('.son').on('click.zs', function () {
alert('hello world!')
})
$('.father').on('click.zs', function () {
alert('hello!')
})
$('.father').on('click', function () {
alert('hello world!')
})
$('.son').trigger('click.zs');
//会触发第一，二个函数；
利用trigger触发子元素带命名空间的事件，那么子元素所有具有相同类型的时间和父元素具有相同类型的事件会被触发。
$('.son').on('click.zs', function () {
alert('hello world!')
})
$('.father').on('click.zs', function () {
alert('hello!')
})
$('.father').on('click', function () {
alert('hello world!')
})
$('.son').trigger('click');
//所有函数都会被触发；
事件委托（使用：delegate（“委托事件元素”，“事件”，“函数”））
$('ul').delegate('li', 'click', function () { console.log($(this).html()); })
jQuery移入移出事件
内部添加
$('位置').appened('添加的元素')
$('添加的元素').appenedTo('位置')
例如：$('ul').appened('li'): 把li添加到ul最后面；
$('位置').prepened('添加的元素')
$('添加的元素').prepenedTo('位置')
例如：$('ul').appened('li'): 把li添加到ul最前面；
删除节点
remove();可以传参数
$('xxx').remove();
empty();删除全部内容和子元素
$('xxxx').empty();
浙公网安备 33010602011771号