1.jQuery的静态map方法
jQuery的map方法和each方法的区别
1.each的默认返回值的遍历谁就返回谁
map的默认返回值是一个空数组
2.each不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调的函数中对遍历的数组进行处理
2.jQuery的其他静态方法
(1)去除字符串两端的空格 $.trim(str)
(2) 判断传入的对此是否是window对象 $.iswindow(win)
(3) 判断传入的是否是数组 $.isArray(arr) 真数组返回true
(4) 判断是否是函数 $.isFunction(fun)
$.isFunction(jQuery) // true 说明jQuery是一个函数 jQuery是一个匿名函数
3.jQuery holdReady方法
在jQuery中,在DOM加载完成之后会立即执行入口函数,但是如果想要暂停入口函数的执行,可以使用$.holdReady(true)
就可以暂停入口函数的执行了。如果想要继续入口函数的执行,可以使用$.holdReady(false)
4.jQuery内容选择器
(1) :empty 选择既没有文本也没有子元素的节点
var div1 = $("div:empty") 找到既没有文本也没有子元素的选择器
(2) :parent 找到有文本内容或者子元素的节点
(3) :contains("strTest") 包含"strTest"指定文本内容的节点
(4) :has("span") 包含子指定子元素span的指定元素
5.jQuery属性节点
js中可以获取属性节点也可以删除属性节点
在jQuery中设置属性节点的方式有两种(一个参数是添加 两个参数是设置)
(1) $("span").attr("class1","classStyle1")
(2) $("span").prop("class2","classStyle2")
删除属性节点的方式也有两种
(1) $("span").removeAttr("class1")
(2) $("span").removeProp("class2")
如何选择使用这两种方式? 如果是需要的返回结果是true/flase的类型就使用prop的方式,其他的就选择attr的方式。
6.jQuery操作class样式
使用jQuery动态的操作已有的class
addClass("class1 class2") // 添加class 样式 class1 和class2 两个class用空格隔开
removeClass("class1") //删除class
toggleClass("class2") // 切换class 有就删除 没有就添加
7.jQuery获取/设置文本值
1,设置带有文本标签的文本
$("div").html("<p>html设置测试</p>"); // 相当于JS中的innerHTML
$("div").html(); //获取html的文本内容 相当于JS中的innerHTML()
2.设置文本
$("div").text("文本设置测试") //相当于JS中的innerText()
$("div").text() //获取JS中的文本内容
3.设置DOM元素的值
$("div").value('测试值的设置'); //给DOM元素设置值
$("div").value() //获取DOM元素的值
8.jQuery操作css样式
1.jQuery逐个设置样式
$("div").css("width","300px");
$("div").css("height","300px");
2.jQuery链式设置样式
$("div").css("width","300px").css("height","300px");
3.批量设置(推荐)
$("div").css({
width:"100px",
height: "200px"
});
4.获取css的样式值
$("div").css("width"); //获取css的宽度
9.jQuery的位置操作
1.offset: 获取元素距离窗口的位置
//获取元素距离左侧窗口的偏移量
$(".class1").offset().left
//设置元素距离左侧的偏移量
$(".class2").offset({
left: "20px"
})
2.获取元素的position定位
$(".class1").position().left
jQuery 不能直接设置position
10.jQuery scrollTop
// 获取元素内部滚动条滚动的偏移位
$(".scroll").scrollTop()
//设置滚动的偏移位
$(".scroll").scrollTop(100);
//获取网页的滚动偏移位
$("body").scrollTop() + $("html").scrollTop();//为了保证浏览器的兼容
11.jQuery中两种绑定事件的方式
1.eventName(fn) //编码效率高 部分事件jQuery没有添加 所以部分事件不能使用
$("button").click(function() {})
2.on(event,fn) //编码效率偏低 都可以使用
$("button").on("click",function() {});
注意点:注册多个相同或者不同类型的事件不会被覆盖
12.jQuery事件的移除
off移除事件
$("button").off(); //不传递参数 ,移除所有事件
$("button").off("click"); //移除所有的click事件
$("button").off("click",test1); //传递2个参数 移除指定类型的指定事件
13.jQuery的事件冒泡和默认行为
1.什么是事件冒泡?
在父子级关系的DOM元素中,父元素的事件会传递给子元素的事件,这一现象就i是事件的冒泡
2.如何阻止事件的冒泡
(1) 可以在子元素的事件函数中 "return false" 的方式来阻止事件的冒泡
(2) 可以在子元素的事件函数中使用到event参数 event.stopPropagation()
3. 什么是默认行为
例如像a标签会默认的跳转、submit表单会默认提交并跳转等行为是默认行为
4.如何阻止默认行为
(1) 在事件中使用"return false" 来阻止默认行为
(2) 在事件中使用event.preventDefault()
14.jQuery事件默认触发
jQuery事件函数自动触发
1.$(".son").triggle(click);
2.$(".son").triggleHandle('click');
网友评论