jQuery

jQuwey的入口函数

等DOM加载完成

$(function(){
	//	此处是页面DOM加载完成的入口
})

筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)’)	获取到li元素中,选择索引为index从0开始
:odd	$(‘li:odd’)	获取到li元素中,选择索引为奇数的元素
:even	$(‘li:even’)	获取到li元素中,选择索引为偶数的元素

筛选方法

语法	用法	描述
parent()	$(“li”).parent();	查找**父级**.
children(selector)	$(“ul”).children(“li”);	相当与$(“ul>li”),最近一级(亲儿子)
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),**后代**选择器
siblings(selector)	$(“.first”).siblings(“li”);	查找兄弟节点,不包括自己本省
nextAll([expr])	$(“.first”).nextAll();	查找**当前元素之后**的同辈元素
prevtAll([expr])	$(“.first”).prevtAll([expr]);	查找**当前元素之前**的同辈元素
hasClass(“class”)	$(“div”).hasClass(“box”)	检查当前的元素是否含有某个指定元素,如果有返回true
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
parents()	$(“li”).parents();	查找**指定的祖先元素**.

显示元素和隐藏元素

//	mouseover  鼠标经过事件
$(".nav>li").mouseover(function(){
    //	显示元素  show()
    $(this).children("ul").show();
})
$(".nav>li").mouseout(function(){
    //	隐藏元素	hide();
    $(this).children("ul").hide();
})

jQuery样式操作

操作css方法

1. 参数只写属性名, 则返回属性值

   $("div").css("width");
   

2. 参数是属性名,属性值,逗号分隔.是设置一组样式,属性必须加引号.

   $(this).css("background","red");
   $("div").css("width",300);
   

3. 参数可以是对象的形式,方便设置很多组样式. 属性名和属性值用冒号隔开

   $("div").css({
     color: "red",
     backgroundColor: "pink",
     width: 200,
     height: 200,
    })
   

设置类样式方法

作用等同于以前的classList,可以操作类名,注意操作类里面千万**不要加小数点**.

1. 添加类

   $("div").addClass("box");
   

2. 移除类

   $(this).removeClass("box");
   

3. 切换类

   $(this).toggleClass("box");
   

显示隐藏效果

1. 显示语法规范

   show([spedd],[easing],[fn])
   

2. 隐藏语法规范

   hide([spedd],[easing],[fn])
   

3. 切换语法参数

   toggle([speed],[easing],[fn])
   

4. 参数

   1. 小括号代表参数可以省略
   2. speed:三种预定速度表示动画长度(如:1000)
   3. easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear".
   4. fn: 回调函数, 在动画完成时执行的函数, 每个元素执行一次

滑动效果

1. 滑动显示效果语法

   slideDown([speed],[easing],[fn]);
   

2. 滑动隐藏效果

   slideUp([speed],[easing],[fn]);
   

3. 滑动切换效果

   slideTggle([speed],[easing],[fn]);
   

4. 参数

   1. 小括号代表参数可以省略
   2. speed:三种预定速度表示动画长度(如:1000)
   3. easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear".
   4. fn: 回调函数, 在动画完成时执行的函数, 每个元素执行一次

动画队列及其停止排队方法

1. 动画或者效果排列.

   动画或者效果一旦触发就会执行如果多次就造成多个动画或者效果.

2. 停止排队. stop();

   stop();
   $("div").stop().slideToggle();
   

   stop()写到动画或者效果**的前面,相当于结束上一次动画**.

淡出淡入效果

1. 淡入效果语法规范

       fadeIn([speed],[easing],[fn]);
   

2. 淡出效果语法规范

   fadeOut([speed],[easing],[fn]);
   

3. 淡出淡入切换效果

   fadeToggle([speed],[easing],[fn]);
   

4. 渐进方式调整到指定的不透明度

   fadeTo([speed],opacity,[easing],[fn]);
   
                   $("ul").fadeTo(1000, 0.5, function() {
                       $("ul").fadeTo(1000, 1);
                   });
   

5. 参数

   1. opacity透明度必须写,取值0~1之间.
   2. 小括号代表参数可以省略
   3. speed:三种预定速度表示动画长度(如:1000)
   4. easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear".
   5. fn: 回调函数, 在动画完成时执行的函数, 每个元素执行一次

自定义动画

1. 语法

   animate(params,[speed],[easing],[fn]);
   
   $("button").click(function() {
                   $("div").animate({
                       height: 200,
                       top: 300,
                       left: 300,
                       width: 500,
                       opacity: 0.3,
                   }, 500)
               });
   

2. 参数

   1. params:想要改变的样式属性,以对象形式传递,必须写. 属性名可以不带引号,如果是复合属性需要采用取驼峰命名法borderLeft. 其余参数都可以省略.
   2. speed:三种预定速度表示动画长度(如:1000)
   3. easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear".
   4. fn: 回调函数, 在动画完成时执行的函数, 每个元素执行一次

jQuery属性操作

1. 获取固有属性

   prop("属性")
   

2. 设置固有属性

   prop("属性","属性值")
   

3. 获取自定义属性

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

4. 设置自定义属性

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

5. 数据缓存data

6. 附加数据语法

   data("name","value");	//被选中元素附加数据
   

7. 获取数据语法

   data("name")	//向被选中元素获取数据
   data("index")	//	data-index
   

   同时还可以读取HTML5自定义属性 data-index,得到的是数字型.

   在html结构里面看不见

jQuery内容文本值

1. 普通元素内容html() (相当于原生的innerHTML)

   html()	//获取元素的内容
   html("内容")		//设置元素内容
   

2. 普通元素文本内容text() (相当于原生的innerText)

   text()	//获取文本的内容
   text("内容")		//设置文本内容
   

3. 表单的值val() (相当于原生的value)

   $("input").val();
   $("input").val("请输入内容");
   

jQuery元素操作

1.遍历元素

遍历元素

语法1

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

let arr = ['red', 'blue', 'pink', 'skyblue', 'green'];
        $(function() {
            $("div").each(function(index, dom) {
                console.log(index);
                console.log($(dom));
                $(dom).css("color", arr[index]);
            })
        });

1. domEle 是**每个DOM元素对象, 不是jQuery对象**.
2. 所以要想使用jQuery方法 需要dom元素转换jQuery对象 $(“domEle”).

 $.each(object,function(index,element) {});
//	遍历数组
let arr = ['red', 'blue', 'pink', 'skyblue', 'green'];
        $(function() {
            $.each(arr, function(index, dom) {
                console.log(index);
                console.log(dom);
            })
        });

1. $.each()方法可用于遍历任何对象.主要用于数据处理,比如数组,对象
2. 里面的函数有两个参数 : index 是每个元素的**索引号; element 遍历内容;**

2.创建元素

语法

let li = ("<li></li>");

3.添加元素

1. 内部添加

   //  内部添加并且放到内容的最后面
   element.append("内容")
   //  内部添加并且放到内容的最前面
   element.prepend("内容");
   
           let li = $("<li>后来添加得</li>");
           let lis = $("<li>最后添加得</li>");
           $("ul").append(li); //  内部添加并且放到内容的最后面
           $("ul").prepend(lis); //  内部添加并且放到内容的最前面
   

2. 外部添加

   //	外部添加并且放到内容的后面
   element.after("内容");
   //	外部添加并且放到内容的前面
   element.before("内容");
   
   let div = $("<div>124</div>");
           let divs = $("<div>12</div>");
           $("div").after(div);
           $("div").eq(0).before(divs);
   

   1. 内部添加元素生成之后,他们是父子关系.
   2. 外部添加元素,生成之后,他们是兄弟关系.

4.删除元素

element.remove()	//删除匹配的元素本身		自杀	
element.empty()		//删除匹配的元素集合中的所有子节点		杀孩子
element.html("")	//清空匹配的元素内容		杀孩子

jQuery尺寸

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

• 以上参数为空,则获取相应值,返回的数字型.
• 如果参数为数字,则是修改相应值.
• 参数可以不加单位.

位置

位置主要有三个 : offset , position() , scrollTop() / scrollLeft()

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

1. offset() 方法设置或返回被选元素相对于**文档**的偏移坐标 , 跟父级没有关系.
2. 该方法有2个属性 left , top | offset().top 用于获取距离文档顶部的的距离, offset().left 用于获取距离文档左侧的的距离
3. 可以设置元素的偏移 offset({top:10,left:10});

2.position() 获取元素偏移

1. position() 方法只能获取**带有定位的父级**偏移坐标,如果父级没有定位则以文档为准.
2. **只能获取**不能赋值.

事件处理on()绑定事件

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

语法

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

1. events: 一个多个用空格分割的事件类型, 如 “click"或"keydown”.
2. selector : 元素的子级选择器.
3. fn : 回调函数,即绑定在元素身上的侦听函数.

$("div").on({
                mouseenter: function() {
                    $(this).css("background-color", "#f0f");
                },
                mouseleave: function() {
                    $(this).css("background-color", "")
                },
                click: function() {
                    $(this).css("background-color", "#f00")
                }
            });

//  鼠标经过和鼠标离开事件  都触发函数
$("div").on("mouseenter mouseleave", function() {
    $(this).toggleClass("center");
})

//  给ul里面所有的小li添加点击实事件
        $("ul").on("click", "li", function() {
            $(this).css("background-color", "red");
        });

事件处理off()解除事件

$(".box").one("click", ".left" ,funciton() {})	//一次性事件
$("p").off()		//解除p元素所有的事件处理程序
$("p").off("click")		//解绑p元素 事件上面的点击事件
$("ul").off("click","li");	//解绑事件委托

自动触发事件 trigger()

element.click();
element.trigger("type");	//	type是事件类型
element.triggerHandler("type")	//	不会触发元素默认行为

事件对象

element.on("click", funciton(){})
$("div").on("click", funciton() {
	console.log("点击了 div");
})
$("document").on("click" , function() {
    console.log("点击了DOM");
})

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

阻止冒泡: event.stopPropagation()

对象拷贝

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

语法

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

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

$(function() {
    let targetObj = {
        id: 0,
        name: "huang",
    };
    let obj = {
        id: 1,
        name: "tai",
        imgs: {
            hh: 11
        }
    };
    console.log(targetObj);
    console.log(obj);
    $.extend(targetObj, obj); //把右边给左边 
    console.log(targetObj);
})