jQuery-2

jQuery属性操作

获取元素固有属性

• prop(“属性”) （获取）
• prop(‘’属性’’, ‘’属性值’’) （设置）

获取元素自定义属性

• attr(‘’属性’’) // 类似原生 getAttribute()
• attr(‘’属性’’, ‘’属性值’’) //
  类似原生 setAttribute()

<script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));

            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));

        })
    </script>

内容文本值

1.html() 普通元素内容

2.text() 普通元素文本内容

3.val() 表单的值

元素操作

遍历

如果想要给同一类元素做不同操作，就要用到遍历

each()

${"div"}.each(function(index,domEle){xxx;})
//回调函数第一个参数一定是索引号，可以自己指定索引号名称
//第二个参数一定是DOM对象

$.each() 主要做数据处理

$.each(object，function (index, element) { xxx; }）       
1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数：  index 是每个元素的索引号;  element  遍历内容

创建，添加，删除元素

<script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");   //动态的创建了一个li
            // 2. 添加元素

            // (1) 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面

            // (2) 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 本身
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

        })
</script>

尺寸位置操作

尺寸

位置

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

1.①offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。

②该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。

③可以设置元素的偏移：offset({top: 10, left: 30 });

①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

②该方法有2个属性 left、top。position().top用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。

③该方法只能获取。

scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

①scrollTop() 方法设置或返回被选元素被卷去的头部。

②不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

jQuery事件

单个事件注册

element.事件(function(){})       
$(“div”).click(function(){  事件处理程序 })       

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

事件处理on()绑定事件

$(“div”).on()

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

$(“div”).on({
  mouseover: function(){}, 
  mouseout: function(){},
  click: function(){}	
});       
//如果事件相同
$(“div”).on(“mouseover mouseout”, function() {
   $(this).toggleClass(“current”);
  });       

可以事件委派操作（事件委托）
事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

 $("ul").on("click", "li", function() {
                alert(11);
            });
绑定在ul身上，但是触发由li触发

==可以给动态创建的元素绑定事件==

$("ol").on("click", "li", function() {
                alert(11);
            })
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

可以理解成给ol绑了click，li是e.target

事件解绑

${“div”}.off()

$("p").off() // 解绑p元素所有事件处理程序

$("p").off( "click")  // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名

$("ul").off("click", "li");   // 解绑事件委托

如果有的事件只想触发一次， 可以使用 one()来绑定事件。

${“p”}.one()

自动触发事件

（前提是事件已经注册，有了事件处理程序）

1. 元素.事件

${“div”}.click()

2. 元素.trigger(“事件”)

${“div”}.trigger(“click”)

3. 元素.triggerHandler(“事件”) 不会触发元素的默认行为

$(“div”).triggerHandler(“click”)

事件对象

element.on(events,[selector],function(event) {})       

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()

jQuery拷贝对象

$.extend([deep], target, object1, [objectN])    

1. deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
2. target: 要拷贝的目标对象
3. object1:待拷贝到第一个对象的对象。
4. objectN:待拷贝到第N个对象的对象。
5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
6. 深拷贝，前面加true， 完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。

多库共存

<script>
        $(function() {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            // 1. 如果$ 符号冲突 我们就使用 jQuery
            jQuery.each();
            // 2. 让jquery 释放对$ 控制权 让用自己决定
            var suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();
        })
    </script>

插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery插件完成。

注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。

jQuery 插件常用的网站：

1. jQuery 插件库 http://www.jq22.com/
2. jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步骤：

1. 引入相关文件。（jQuery文件 和插件文件）

2. 复制相关html、css、js (调用插件)。