JQuery
jQuery属性操作
设置或获取元素固有属性值prop()
-
获取属性语法
$("a").prop("属性")
-
设置属性语法
$("a").prop("属性","属性值")
设置或获取元素自定义属性值attr()
-
获取属性语法
$("a").attr("属性") //类似原生getAttribute()
-
设置属性语法
$("a").attr("属性","属性值") //类似原生setAttribute()
数据缓存data()
data方法可以在指定的元素上存取数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将被移除。
-
附加数据语法
$("a").data("name","value") //向被选元素附加数据
-
获取数据语法
$("a").data("name") //向被选元素获取数据
jQuery内容文本值
普通元素内容html() (相当于原生innerHTML)
$("a").html() //获取元素内容
$("a").html("内容") //设置元素内容
普通元素文本内容text() (相当于原生innerText)
$("a").text() //设置元素文本内容
$("a").text("文本内容") //设置元素的文本内容
表单的值val() (相当于原生value)
$("a").val //获取值
$("a").val("赋值内容") //设置value值
jQuery元素操作
遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同操作,就需要用遍历。
$("div").each(function(index,domEle){xxx;})
- each()方法遍历匹配的每一个元素,主要用DOM处理,each每一个
- 里面的回调函数有2个参数:index是每个元素的索引值,DemEle每个DOM元素对象,不是jQuery对象。
- 要使用jQuery方法,需要把DOM元素转为jQuery对象$(domEle)
jQuery创建添加删除元素
-
创建元素
$("<li>我是新创建的li</li>")
-
添加元素
$("ul").append("li"); //内部添加并且放到内容的最后面 $("ul").prepend(li); // 内部添加并且放到内容的最前面 $(".test").after(div); // .test的后面兄弟形式加一个 $(".test").before(div); // .test的前面兄弟形式加一个
-
删除元素
$("ul").remove(); // 可以删除匹配的元素 自杀 $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子 $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
jQuery事件注册
单个事件注册
element.事件(function(){})
$("div").click(function(){事件处理程序})
其它事件和原生基本一致,比如mouseover、mouseout、blur、focus、change、keyup、resize、scroll等
jQuery事件处理
事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events,[selector],fn)
- events:一个或多个用空格分隔的事件类型,如"click"或"keydown"
- selector:元素的子元素选择器
- fn:回调函数即绑定在元素身上的侦听函数
on()方法的优势
可以绑定多个事件,多个处理事件处理程序
$("div").on({
mouseover:function(){},
resize:function(){},
keyup:function(){}
})
如果事件处理程序相同
$("div").on("mouseover resize",function(){
事件处理程序
})
可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
$("ul").on("click","li",function(){
alert("hello")
})
事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
$("p").off() //解除p元素所有事件处理程序
$("p").off("click") //解除p元素上面的点击事件
$("p").off("click","li") //解除事件委托
自动触发事件trigger()
element.click() //第一种简写形式
element.trigger("type") //第二种自动触发模式
$("p").on("click",function(){
alert("hello");
})
$("p").trigger("click"); //此时自动触发点击事件,不需要鼠标点击
element。triggerHandle(type) //第三种自动触发模式
jQuery事件对象
事件被触发,就会有事件对象的产生
element.on(events,[selector],function(event){})
- 阻止默认行为:event.preventDefault() 或者return false
- 阻止冒泡:event.stopPropagation()
jQuery对象拷贝
如果想把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法
$.extend([deep],target,object,[object])
- deep:如果设置为true为深拷贝,默认为false 浅拷贝
- target:要拷贝的目标对象
- object:待拷贝到第一个对象的对象
- 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
- 深拷贝是完全拷贝对象,而不是地址,修改目标对象不会影响被拷贝的对象
jQuery多库共存
解决方案:
- 把里面的$符号统一改为jQuery. 例如jQuery(“div”)
- jQuery变量规定新的名称:$noConflict()
jQuery尺寸 、位置操作
jQuery尺寸
jQuery位置
-
offset()设置或获取元素偏移
- offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
- 返回值是一个对象,有2个属性 left、top ; offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
- 可以设置元素的偏移:offset({ top: 10, left: 30 });
-
position()获取元素偏移
-
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标
-
返回值是一个对象,有2个属性 left、top;
position().top 用于获取距离定位父级顶部的距离
position().left 用于获取距离定位父级左侧的距离。如果父级都没有定位,则以文档为准。
该方法只能获取
-
jQuery选择器
链式编程
链式编程是为了节省代码量,看起来更优雅
$(this).css("color",'red').slibling.css("color",'pink')
返回值是一个对象,有2个属性 left、top;
position().top 用于获取距离定位父级顶部的距离
position().left 用于获取距离定位父级左侧的距离。如果父级都没有定位,则以文档为准。
该方法只能获取
jQuery选择器
链式编程
链式编程是为了节省代码量,看起来更优雅
$(this).css("color",'red').slibling.css("color",'pink')