快速熟悉jQuery语法

jQuery笔记

笔记编写者 九日

jQuery介绍

JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码；

jQuery是JavaScript框架库中的一种；

jQuery的好处:写的少,做的多,链式编程,隐式迭代等…

jQuery可以解决js兼容的问题

​ 总结：

DOM中的顶级对象:docuemnt—页面中的顶级对象
docuemnt点出来的是DOM中的属性和egtf方法
BOM中的顶级对象:window----浏览器中的顶级对象
window点出来的是浏览器中的属性和方法
window.document
jQuery的顶级对象:jQuery—$
$点出来的是jQuery中的方法

页面的加载

原生js中页面的加载事件，页面加载完毕后执行。

//原生js此方法一个页面只能执行一次，执行最后一次，在页面加载完毕后执行
window.onload=function(){
    
}

jQuery中的页面加载事件：

//和原生方法执行时间一样，但同一页面可执行多次此方法。
$(window).load(function(){
    
});
//页面中基本标签加载完毕后就可以触发了
$(document).ready(function(){
    
});
//页面基本标签加载后执行。
jQuery(function(){
    
});
//jQuery就是$
$(function(){

});

jQuery对象与DOM对象的互转

DOM对象转jQuery对象,只需要把DOM对象放在$(dom对象)—>jQuery对象

var btnObj= document.getElementById("btn");
//DOM对象转jQuery对象,只需要把DOM对象放在$(dom对象)--->jQuery对象
$(btnObj).click(function () {      			$(this).css("backgroundColor","red");
            });

把jQuery对象转DOM对象两种方式:

1.$(btnObj).get(0);---->DOM对象

2.$(btnObj)[0];----->DOM对象

var btnObj=document.getElementById("btn");//DOM对象
var obj= $(btnObj).get(0);//DOM对象

jQuery中的选择器

DOM中获取元素的方式:

• document.getElementById(“id的值”);根据id获取元素,一个

• document.getElementsByTagName(“标签的名字”);根据标签的名字获取元素,多个

• document.getElementsByName(“name属性的值”);根据name属性的值获取元素,多

• document.getElementsByClassName(“类样式的名字”);根据的是类样式的名字来获取元素,多个

• document.getElementsByClassName(“类样式的名字”);根据的是类样式的名字来获取元素,多个

jQuery获取元素的方式:

通过各种选择器来获取元素

• 根据id来获取—>id选择器 ---->$("#id的值");一个

• 据标签的名字来获取—标签选择器—>$(“标签的名字”);多个

• 根据类样式的名字获取—>类选择器—>$(".类样式的名字");多个

• //获取应用cls类样式的li标签
  //标签+类样式的选择器 $(“li.cls”).css(“backgroundColor”,“yellow”);

• 点击按钮,设置页面中的span标签,li标签,div标签的背景颜色

  //通过多条件选择器获取元素,统一设置背景颜色
  

  $("#btn").click(function () {
  $(“span,p,li,div”).css(“backgroundColor”,“yellow”);
  });

• 获取的是div中所有的p标签元素
  $("#dv p").css(“backgroundColor”,“red”);
• 获取的是div中直接的子元素
  $("#dv>p").css(“backgroundColor”,“red”);
• 获取的是div后面的第一个p标签元素
  $("#dv+p").css(“backgroundColor”,“red”);
• 获取的是div后面所有直接的兄弟元素p标签元素
  $("#dv~p").css(“backgroundColor”,“red”);
• $("#uu>li:even").css(“backgroundColor”,“yellow”);//偶数的li
• ​$("#uu>li:odd").css(“backgroundColor”,“red”);//奇数的li
• $(“div:eq(”+index+")"):
  • $(".products>div:eq("+index+")")；//products类下的索引为index的div。

索引选择器

获取ul中的索引为4的li标签元素
$("#uu>li:eq(4)").css(“backgroundColor”,“red”);
获取ul中的索引大于4的所有的li标签元素
$("#uu>li:gt(4)").css(“backgroundColor”,“red”);
获取ul中的索引小于4的所有的li标签元素
$("#uu>li:lt(4)").css(“backgroundColor”,“red”);

获取兄弟元素的方法

• .next();获取的是当前元素的下一个兄弟元素

  • $(this).next().css(“backgroundColor”,“green”);

• nextAll();获取的是当前元素的后面的所有的兄弟元素

  • $(this).nextAll().css(“backgroundColor”,“green”);

• .prev();获取的是当前元素的前一个兄弟元素

  • $(this).prev().css(“backgroundColor”,“green”);

• .prevAll();获取的是当前元素的前面的所有兄弟元素

  • $(this).prevAll().css(“backgroundColor”,“green”);

• .siblings(“div”)

  • $(".products>div:eq("+index+")").siblings(“div”).removeClass(“selected”);//索引为index的div之外的所有div都移除selected。

操作类样式

• .css()

  • .css(“属性”,“属性值”);
  • .css(“属性”,“属性值”).css(“属性”,“属性值”);
  • .css({“属性”:“属性值”,“属性”,“属性值”});

• .addClass()

  • .addClass(“cls”);//在addClass方法中类样式的名字前面没有点(.)。

  • addClass添加样式的时候.多个类样式的名字中间用空格隔开：

    .addClass(“cls cls2”);

• .removeClass()

  • 移除元素的一个类样式：.removeClass(“cls”);

  • 移除div的所有的类样式,removeClass方法中什么也不写移除的是当前元素的所有的类样式

    .removeClass();

• .hasClass()

  • 验证某元素是否有某个类元素：.hasClass(“cls”);

• toggleClass()

  • .toggleClass(“cls”);//切换类样式,类似开关灯，改变背景颜色

链式编程

多行代码合并成一行代码，前提是要认清此行代码返回的是不是对象，是对象才可以进行链式编程。

链式编程:对象.方法().方法().方法();…

$("#dv").html("<p>这是一个p</p>").css("backgroundColor","red");

断链

var obj=$("#dv").html().css("backgroundColor","red");
                console.log(obj);
//$("#dv").html();返回的不是对象返回的是 #dv 里的html内容，是字符串。

链式编程实例

    <script>
        //获取列表中每个li,当鼠标进入后,当前的li有高亮显示,点击的时候可以让当前被点击的li的字体变大,字体的颜色改变,改变字体

        //页面加载
        $(function () {
            $("#uu>li").mouseover(function () {
                $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
            }).click(function () {
                $(this).css("fontSize","50px").css("color","green").css("fontFamily","全新硬笔行书简");
            });

        });
    </script>

//点击按钮,改变按钮的value值,鼠标进入到按钮中,按钮的宽改变,高改变,鼠标离开的时候,按钮的背景颜色为绿色
        $(function () {
            $("#btn").click(function () {
                $(this).val("改变了");
            }).mouseover(function () {
                $(this).css({"width":"200px","height":"100px"});
            }).mouseout(function () {
                $(this).css("backgroundColor","green");
            });
        });

arguement.callee

arguments.callee相当于递归，arguments.callee调用当前正在执行的函数。

$(function () {
            $("#btn1").click(function () {
                //获取div,最后一个图片,隐藏
                $("div>img").last("img").hide(800,function () {
                    //arguments.callee相当于递归
					/* arguments.callee调用当前正在执行的函数， */
                    $(this).prev().hide(800,arguments.callee);
                });
            });
            //显示
            $("#btn2").click(function () {
                $("div>img").first("img").show(800,function () {
                    //arguments.callee相当于递归
                    $(this).next().show(800,arguments.callee);
                });
            });
        });

其他的动画函数

滑入：slideUp 滑出：slideDown 切换:slideToggle

淡入：fadeIn 淡出：fadeOut 切换：fadeToggle 达到透明度：fadeTo(1000,0.3)-----1秒时间达到透明度0.3

$('#dv').slideUp(1000);

show(500)；显示

hide(slow)；隐藏

参数：数字类型:1000毫秒—1秒

​ 字符串：slow、normal、fast

animate方法

参数：

1. 键值对—对象
2. 时间—1000毫秒—1秒
3. 匿名函数—回调函数

                $("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
                    $("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
                });

stop方法

用于解决因鼠标进入、离开事件而出发多次的bug，如下图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xIbTJDhF-1585212956929)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\1580527061311.png)]

可用stop()方法来停止动画，只执行一次停止后的动画函数。

 $(this).children("ul").stop().show(500);//显示
 $(this).children("ul").stop().hide(500);//隐藏

jQuery中DOM操作

DOM中创建元素：

1. document.write(“标签代码”)；缺陷：会把之前的代码给覆盖掉。
2. innerHTML
3. innerText
4. document.createElement(“标签名字”)

jQuery中创建元素方式：

1. $(“标签代码”)
2. 对象.html(“标签代码”)

var aObj=$("<a href='http://www.baidu.com'>百度"+i+"</a>");
$("#dv").append(aObj);
var bObj=$("#dv").html("<a href='http://www.baidu.com'>百度"+i+"</a>");

添加元素方式

对象

​ .append(aObj);把aObj元素添加至对象元素内，新添加的在最后面

appendappend方法把元素添加到另一个元素中的时候,有点剪切的效果 $("#dv2").append($("#dv1>p"));

$("#se2").append($("#se1>option:selected"));

​ aObj.appendTo($("#dv"));主动的添加到div中

​ .prepend(aObj);把aObj元素添加至对象元素内，新添加的在最前面

​ .after(aObj);把aObj元素添加至对象元素后面(当兄弟元素添加)

​ .before(aObj);把aObj元素素添加至对象元素前面(当兄弟元素添加

清除元素

$("#dv").html("");//清空元素中的内容

$("#dv").empty();//清空元素中的内容

$("#dv").remove();//移除元素自身—自杀

克隆元素

.clone();

var spanObj=$("#dv>span").clone();//克隆,复制了这个元素
spanObj.css("fontSize","50px");
$("#dv2").append(spanObj);

表单&value操作

.val();获取value属性值

.val(“设置值”);设置value属性值

.text();.val();获取文本域的内容

value可用于选中下拉框

$("#btn").click(function () {
    $("#se").val(4);//可以改变某一项选中
});
//==================================
<select id="se">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">重庆</option>
    <option value="5">东京</option>
</select>

自定义属性

.attr(“属性名”,“属性值”);//设置属性值。

.attr(“属性名”);//获取该元素这个属性的值。

//给超链接设置title属性和热点文字
var aObj=$("<a></a>");
aObj.attr("title","传智播客好帅");
aObj.attr("href","http://www.itcast.cn");
aObj.text("传智播客");
$("#dv").append(aObj);
console.log(aObj.attr("href"));

复选框选中问题

.prop(“checked”);//可以获取元素是否选中的状态

.prop(“checked”,“true”);//选中

.prop(“checked”,“false”);//不选中

根据type属性选择表单

获取tbody中所有的复选框的个数

var length1=$("#j_tb").find(":checkbox").length;

offset、left、height、width、scrollLeft等样式操作

width、height

1. 通过元素的css()方法可以获取元素的宽和高,但是都是字符串类型

   .css(“width”);.css(“height”);

2. 通过width()、height()获取和设置宽高

   .width();.height();//获取

   .width(“值”);.height(值)😕/设置-------参数可以为数字或字符串。

left、top

获取left和top的值—>都是数字类型

.offset().left；.offset().top；

设置

.offset({“left”:200,“top”:200});

scollLeft、scrollTop

获取卷曲距离

$(this).scrollLeft()+"===="+$(this).scrollTop()

绑定与解绑

事件对象

绑定事件的匿名函数通过arguement.length可以查看有几个参数，像click处理函数中有一个参数：

$("#dv").on("click","input",function (event) {
//获取函数在调用的时候,有几个参数
//console.log(arguments[0]);
console.log(event);
//event.delegateTarget----->div--->谁代替元素绑定的事件--div
//event.currentTarget----->input--->真正是谁绑定的事件
//event.target---->input----触发的事件
});

绑定事件

bind():

第一个参数是 事件名字，第二个参数 匿名函数

$("#btn").bind("click",function () {
    alert("我被点了");
});

可以为元素同时绑定多个事件，将多个对象封装成对象

$("#btn").bind({"click":function(){
    alert("我被点了");
},"mouseover":function(){
    $(this).css("backgroundColor","red");
},"mouseout":function(){
    $(this).css("backgroundColor","");
}});

多个事件绑定一个函数

//为按钮注册鼠标进入和离开的事件--绑定--bind
$("#btn").bind("mouseover mouseout",function () {
	//操作
});

delegate():

参数:3个

1. 要绑定事件的元素—p
2. 要绑定的事件的名字—click
3. 绑定事件的处理函数—匿名函数

$("#dv").delegate("p","click",function () {
	//HAHAHHA
});

on():

推荐使用

on方法:两个参数:1事件的名字,2事件处理函数

$("#btn").on("click",function () {
	//操作
});

on方法:三个参数: 1,事件的名字, 2.要绑定事件的元素–p,3事件处理函数，on是父级元素调用,目的:为子级元素去绑定事件

$("#dv").on("click","p",function () {
	//操作
});

总结

绑定事件:
bind:
绑定多个事件
参数:{“事件的类型”:事件处理函数,…}
delegate
参数:父级元素.delegate(“子级元素”,“事件类型”,事件处理函数)
on
参数:父级元素.on(“事件类型”,“子级元素”,事件处理函数);

解绑

on：

事件对象.off();//解绑所有事件

事件对象.off(“click”);//解绑点击事件

bind：

事件对象.unbind(“click”);解绑点击事件

delegate：

事件对象.undelegate(“p”,“click”);//解绑

解绑细节

如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑

但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑

$("#btn1").click(function () {
	// $("#dv").off("click");
	//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
	//$("#dv").off("click","**");
	$("#dv").off();//移除父级元素和子级元素的所有的事件
});

事件触发

在一个事件中触发另一个事件

触发事件的三种方式：

1. $("#btn1").click();
2. trigger()方法中需要写上触发事件的名字$("#btn1").trigger(“click”);
3. $("#btn1").triggerHandler(“click”);//触发事件

三种触发方式的不同

第一种触发事件的方式和第二种触发事件的方式是相同的,都会触发浏览器默认的事件(光标在文本框中闪烁),并执行事件。

第三种触发事件的方式不会触发浏览器的默认事件,但是会触发事件

//focus:是浏览器的默认事件。
$(function () {
	$("#btn").click(function () {
		//触发文本框的获取焦点的事件
		//$("#txt").focus();
		//$("#txt").trigger("focus");
		$("#txt").triggerHandler("focus");
		$("#sp").text("文本框获取到焦点了");
	});
});

事件冒泡

事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发。

元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发。

取消事件冒泡

return false；

return false还可以取消浏览器的默认事件。

eg：

$(function () {
            $("#ak").click(function () {
                alert("超链接被点了");
                //取消超链接的默认的点击事件
                return false;
            });
});
//=====================================
<a href="http://www.itcast.cn" id="ak">传智播客</a>

多库共存

让jquery对$对象进行释放控制权varxy=$.noConflict();
从此以后xy就是曾经的$—一毛一样的

常见的方法

如果小括号中写内容,就是设置文字内容，小括号什么也不写,表示的是获取这个元素中的文字内容。

• .html()方法,设置标签中间显示其他标签及内容,类似于innerHTML

• .text()方法,设置标签中间显示的文本内容,类似于innerText

• .val()方法.设置input标签中value的值,类似于value

• .css()方法,.设置元素的样式,类似于style

• .parent();找到对象父元素。

• each();迭代数组，定义函数。

  $(function () {
  	//页面加载后,让每个li的透明度发生改变
  	//不同的元素不同的设置方式--each方法
  	$("#uu>li").each(function (index,element) {
  		//第一个参数是索引,第二个参数是对象
  		console.log(arguments[0]+"====="+arguments[1]);
  		$(element).css("opacity",(index+1)/10);
  	});
  });