jQuery内容（二）

最新推荐文章于 2022-11-12 21:27:00 发布

码龙小飞

最新推荐文章于 2022-11-12 21:27:00 发布

阅读量864

点赞数 1

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46017186/article/details/123596323

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.元素操作

遍历元素

语法1：

$("div").each(function(index,domEle){xxx;})

1.each（）方法遍历匹配的每个元素，主要用DOM处理，each每一个

2.里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jquery对象

3.要使用jquery方法，需要将这个dom元素转换为jquery对象$(domEle)

语法2:

$each.(object,function(index,element){xxx;})

1.$each方法可用于遍历任何对象，主要用于数据处理。

2.里面两个参数：index是每个元素的索引号；element是遍历内容

创建元素

$("<li></li>"); //动态创建了一个<li>

添加元素

            // (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(""); // 可以删除匹配的元素里面的子节点 孩子

2.jQuery尺寸

语法	用法
width()/height()	取得匹配元素宽度和高度值，只算width/height
innerWidth()/innerHeight()	取得匹配元素宽度和高度值，只含padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值，只含padding、border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值，只含padding、border、margin

3.jQuery位置

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

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

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

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

2.position()设置元素偏移

如果没有带有定位的父级，则以文档为准，这个方法只能获取不能设置偏移

3.卷去的高度和宽度

被卷去的头部 scrollTop()

被卷去的左侧 scrollLeft()

4.事件注册

单个时间注册

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

其他事件和原生基本一样

比如：mouseover\mouseout\blur\focus\change\keyup\resize\scroll等

事件处理on()绑定事件

element.on(evens,[selector],fn)

1.events:一个或多个用空格分隔的事件类型，如“click”或“keydown”

2.selector：元素的子元素选择器

3.fn：回调函数

on()方法优势1：

可绑定多个事件，多个处理事件处理程序

$("div").on({
    mouseover:function(){},
    mouseout:function(){},
    click:function(){}
});

如果事件处理程序相同

$("div").on("mouseover mouseout",function(){
    $(this).toggleClass("current");
});

on()方法优势2：

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

$('ul').on('click','li',function(){
    alert('hello world！')；
});

on()方法优势3：

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

5.事件解绑

off()方法可以移除通过on()方法添加的事件处理程序

$("p").off();//解绑p元素所有事件处理程序
$("p").off("click");//解绑p元素上面的点击事件
$("p").off("click","li");、、解绑事件委托

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

6.自动触发事件

有些事件希望自动触发，比如轮播图。

element.click();//第一种自动触发模式
element.tigger("type");//第二种自动触发模式
element.tiggerHandler(type);//第三种自动触发模式

7.事件对象

事件被触发，就会有对应事件对象产生。

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

event.preventDefault() //阻止默认行为
return false //阻止默认行为

event.stopPropagation()  //阻止冒泡

8.拷贝对象

如果想要把某个对象拷贝（合并）给另一个对象使用，此时可以使用$.extend()方法。

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

1.deep:如果设为true，则为深拷贝，默认为false 浅拷贝

2.target:要拷贝的目标对象

3.object1:待拷贝到第一个对象的对象

4.objectN:待拷贝到第N个对象的对象

5.深拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

6.浅拷贝是完全克隆（拷贝对象，而不是地址），修改目标对象不会影响被拷贝对象