JQuery

JQuery

jQuery属性操作

设置或获取元素固有属性值prop()

1. 获取属性语法

   $("a").prop("属性")
   

2. 设置属性语法

   $("a").prop("属性"，"属性值")
   

设置或获取元素自定义属性值attr()

1. 获取属性语法

   $("a").attr("属性") //类似原生getAttribute()
   

2. 设置属性语法

   $("a").attr("属性","属性值") //类似原生setAttribute()
   

数据缓存data()

data方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。

1. 附加数据语法

   $("a").data("name","value") //向被选元素附加数据
   

2. 获取数据语法

   $("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;})

1. each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个
2. 里面的回调函数有2个参数：index是每个元素的索引值，DemEle每个DOM元素对象，不是jQuery对象。
3. 要使用jQuery方法，需要把DOM元素转为jQuery对象$(domEle)

jQuery创建添加删除元素

1. 创建元素

   $("<li>我是新创建的li</li>")
   

2. 添加元素

   $("ul").append("li"); //内部添加并且放到内容的最后面
   $("ul").prepend(li); 	 // 内部添加并且放到内容的最前面
   $(".test").after(div);	 // .test的后面兄弟形式加一个
   $(".test").before(div);	 // .test的前面兄弟形式加一个
   
   

3. 删除元素

   $("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)

1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown"
2. selector：元素的子元素选择器
3. 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多库共存

解决方案：

1. 把里面的$符号统一改为jQuery. 例如jQuery(“div”)
2. jQuery变量规定新的名称：$noConflict()

jQuery尺寸 、位置操作

jQuery尺寸

jQuery位置

1. offset()设置或获取元素偏移

   • offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
   • 返回值是一个对象，有2个属性 left、top ； offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
   • 可以设置元素的偏移：offset({ top: 10, left: 30 });

2. 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')