jQuery的简单介绍

jQuery的简单介绍

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

​ *jQuery是JavaScript框架库中的一种

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

​ *jQuery可以解决js兼容的问题

*/

/*

​ *

​ * DOM中的顶级对象:docuemnt—页面中的顶级对象

​ * docuemnt点出来的是DOM中的属性和方法

​ * BOM中的顶级对象:window----浏览器中的顶级对象

​ * window点出来的是浏览器中的属性和方法

​ * window.document

​ * jQuery的顶级对象:jQuery 或 $

​ * $点出来的是jQuery中的方法

​ *

​ *

​ *

*/

// 页面加载事件

//jQuery的代码—和DOM中的window.onload事件是相同的

// 第 1种 $(window).load(function () {

// console.log(“啊哈哈,我真的好帅1”);

// });

// $(window).load(function () {

// console.log(“啊哈哈,我真的好帅2”);

// });

// 页面中所有的内容加载完毕后才触发,标签,图片,文字内容…

// 第二种页面加载的事件的写法—都是方法了

// 页面中的基本的标签加载完毕后就可以触发了

// 第 2种 $(document).ready(function () {

// console.log(“我为什么这么帅1”);

// });

// $(document).ready(function () {

// console.log(“我为什么这么帅2”);

// });

​ //页面中基本的标签加载后就执行

// 第 3种 jQuery(function () {

// console.log(“纯洁的我就是这么帅的1”);

// });

// jQuery(function () {

// console.log(“纯洁的我就是这么帅的2”);

// });

//第 4种 $(function () {

// console.log(“哈哈,我真的很帅的1”);

// });

// $(function () {

// console.log(“哈哈,我真的很帅的2”);

// });

// jQuery对象和js对象的转换

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

// $(btnObj).click(function () {

// $(this).css(“backgroundColor”,“red”);

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

/*

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

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

​ *

​ * btnObj就是DOM对象

*/ 总结：

/*

​ * DOM对象和jQuery对象可以互转

​ * DOM对象转---->jQuery对象:

​ * $(DOM的对象)----->jQuery对象

​ * jQuery对象---->DOM对象:

​ * 1.

​ * $("#btn")[0]---->DOM对象

​ * 2.

​ * $("#btn").get(0)—DOM对象

​ *

常用的方法

​ .click(function(){})相当于DOM中的onclick，在jQuery中没有on开头的事件

​ .values() js 原生方法 获取对象或者数组的值

​ var obj = { foo: ‘bar’, baz: 42 };

​ console.log(Object.values(obj)); // [‘bar’, 42]

​ // array like object

​ var obj = { 0: ‘a’, 1: ‘b’, 2: ‘c’ };

​ console.log(Object.values(obj)); // [‘a’, ‘b’, ‘c’]

​ a.value; 可以获得a元素的value属性的值 任何标签都可以设置value属性 但是只有input button 等少数标签可以直接用这个方法来获取它的value值，其他的标签你想获取value属性的值只能用 .getAttribute（“value”）来获取

​ 但是没有 .value(),这个方法 它不能支持设置元素的value属性的值 如果要设置 可以这样： a.value = “需要设置的value属性的值”;

​ .val()方法—>小括号中什么也不写,获取元素的value属性的值 注意

​ .val(“内容”);小括号中写内容就是设置元素的value属性

​ 如果是复选框，value小括号里面有数值也可能是设置索引为这个值的那个复选框为选中状态

​ 获取文本域中的内容用value会比较好

​ .text();如果小括号中写内容,就是设置文字内容相当于DOM中的innerText或者是textContent

​ 如果.text();小括号什么也不写,表示的是获取这个元素中的文字内容

​ $("#dv").text(“这是一个div”);//设置

​ console.log($("#dv").text());//获取

​ .html();小括号中直接写标签的字符串内容,就是设置标签中间显示其他标签及内容,类似于innerHTML

​ 小括号中什么也没有,表示的时候获取标签中的元素内容

​

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

​ 该方法如果只是设置一个样式的属性和值,那么这个方法写两个参数,第一个参数是属性,第二个参数是值

​ 1、 $("#dv").css(“backgroundColor”,“yellow”);

​ 2、 里面也可以直接写键值对的方式设置多个属性和值

​ $("#dv").css({“width”:“300px”,“height”:“200px”,“backgroundColor”:“yellow”});

3、 链式编程

​ $(“ul>li”).css(“backgroundColor”,“yellow”).css(“fontSize”,“50px”).css(“fontFamily”,“全新硬笔行书简”).css(“color”,“blue”);

​ .remove() 移除该标签 （自杀）

​ .removeClass() 是移除这个属性 括号里面直接是样式名 不要加 点（.）

​ .addClass() 是添加一个属性 括号里面直接是样式名 不要加 点（.） 需要加引号

​ .toggleClass() 切换类名

​ .hasClass(“类名”) // 判断这个元素有没有该类名

动画方法

​ .hide();//隐藏

​ //hide方法中可以写参数:参数类型:1.数字类型,2字符串类型

​ 参数1:可以写数字类型 1000毫秒—1秒

​ 参数1:字符串: slow normal fast

​ 参数2：是回调函数

​ .show();//显示

​ //show方法中可以写参数:参数类型:1.数字类型,2字符串类型

​ //1数字类型:1000表示的是毫秒 —1秒

​ //2字符串类型: “slow” “normal” “fast”

​ 参数2：是回调函数 arguments.callee 相当于递归

​ //$("#dv").show(1000);

​ $("#dv").show(“fast”);

​ slideUp() 升起

​ slideDown() 落下

​ slideToggle() 切换

​ 方法中都可以写参数

​ 参数1:可以写数字类型 1000毫秒—1秒

​ 参数1:字符串: slow normal fast

​ 参数2：是回调函数

​ .fadeIn() 淡入

​ .fadeOut() 淡出

​ .fadeToggle() 切换

​ 方法中都可以写参数

​ 参数1:可以写数字类型 1000毫秒—1秒

​ 参数1:字符串: slow normal fast

​ 参数2：是回调函数

​ .fadeTo(1000,0)

​ 这个参数有两个，第一个参数 是毫秒值；第二个参数是透明度 0-1

​ 回调函数： 是在动画执行结束后，会自动调用回调函数，完成一些收尾工作

​

​ .animate()

​ 第一个参数： 目标的css样式键值对—对象{“属性名”：“属性值”，“属性名”：“属性值”}

​ 第二个参数： 时间—毫秒值

​ 第三个参数： 匿名函数—回调函数

​ .stop() 用来停止动画（清楚前面的动画，不影响后面）

​ .delay(“毫秒值”) 延迟多少毫秒之后再执行

选择器

​ DOM中获取元素的方式:

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

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

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

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

jQuery获取元素的方式:通过各种选择器来获取元素

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

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

​ 3.根据类样式的名字获取—>类选择器—>$(".类样式的名字");多个 注意前面的点（ . )别忘了

​ 4、//标签+类样式的选择器

​ $(“标签名.类样式名”); 多个相当于css中的交集选择器，既属于标签又应用了这个类样式的一系列标签

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

​ $(“标签名1,标签名2,标签名3，。。。”) 多个 相当于css中的并集选择器

层次选择器

​ //获取div中的相关元素

​

​ //获取的是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”);

​ // *就是所有的元素 id为dv 里的所有元素

​ $("#dv *").css(“backgroundColor”,“yellow”);

筛选选择器

​ :last 或 .last() 都是获取最后一个元素

​ ：frist 或 .frist() 都是获取第一个元素

​

​ :even 偶数的

​ :odd 奇数的

​ :eq(index)获取一个给定索引值的元素

​ :gt(index)获取索引值大于该给定的值的所有元素 不包括该值的索引所对应的元素

​ :lt(index)获取索引值小于该给定索引 值的所有元素 不包括该值的索引所对应的元素

​ :checked 获取某个标签下属的被选中的复选框

​ :checkbox 获取某个标签下属的复选框

​ :selected 获取某个标签下属的被选中的option选项

隔行变色

​

​ $(function(){

​ $("#btn").click(function(){

​ // 偶数的li :even

​ $("#uu>li:even").css(“backgroundColor”,“red”);

​ // 奇数行li :odd

​ $("#uu>li:odd").css(“backgroundColor”,“yellow”);

​ });

​ });

索引选择器

​ //获取id为uu 的ul中的索引为4的li标签元素

​ //$("#uu>li:eq(4)").css(“backgroundColor”,“red”);

​ //获取ul中的索引大于4的所有的li标签元素 不包括4

​ //$("#uu>li:gt(4)").css(“backgroundColor”,“red”);

​ //获取ul中的索引小于4的所有的li标签元素 不包括4

​ //$("#uu>li:lt(4)").css(“backgroundColor”,“red”);

好友列表切换

​ $(function(){

​ $("#u2>li>ul>li").hide();

​ $("#u2>li").click(function(){

​ $(this).siblings(“li”).children(“ul”).find(“li”).hide(500);

​ $(this).children(“ul”).find(“li”).show(500);

​ });

​ });

样式操作

​ 1、为标签添加一个类样式 .addClass(“类样式名”)

​ $("#dv").addClass(“cls”);//在addClass方法中类样式的名字前面没有点(.)

​ $("#dv").addClass(“cls”).addClass(“cls2”);

​ //另一种写法,addClass添加样式的时候.多个类样式的名字中间用** 空格 **隔开

​ $("#dv").addClass(“cls cls2”);

​ 2、移除一个元素的类样式 .removeClass(“类样式”)

​ $("#dv").removeClass(“cls”);

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

​ $("#dv").removeClass();

​ 3、查询这个标签是否应用了cls类样式 .hasClass(“类样式名”)

​ 它的返回值是一个布尔值

​ 4、切换类样式 .toggleClass(“类样式名”)

​ 如果有这个样式就清除掉，如果没有就添加这个样式

**开关灯案例

页面加载后点击按钮实现开关灯的效果

​ $(function () {

// $("#btn").click(function () {

// //先判断body是否应用了某个类样式,如果应用了就移除,如果没有应用就让body应用这个类样式

// if($(“body”).hasClass(“cls”)){

// //应用了–移除该类样式

// $(“body”).removeClass(“cls”);

// $(this).val(“关灯”);

//

// }else{

// //没有应用–让body添加这个类样式

// $(“body”).addClass(“cls”);

// $(this).val(“开灯”);

// }

// });

​ //更简单的代码

​ $("#btn").click(function () {

​ $(“body”).toggleClass(“cls”);//切换类样式

​ });

​ });

********总结 *******

​ /*

​ *

​ * .css()

​ * .css(“属性”,“属性值”);

​ * .css(“属性”,“属性值”).css(“属性”,“属性值”);

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

​ * addClass()

​ * addClass(“类样式名字”);添加一个类样式

​ * addClass(“类样式名字1 类样式名字2”);

​ * removeClass()

​ * removeClass(“类样式名字”);移除类样式

​ * removeClass();移除的是当前元素中所有的类样式

​ * hasClass();判断当前元素是否应用了某个类样式

​ * toggleClass();切换元素的类样式的

​ *

​ *

​ *

​ *

​ */

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

​ 注意每一次点（.）过后都要保证返回值为 该对象 否则容易出现断链，

​

​ 断链的解决方案是在断链的后面加上一个 .end()

​ 链式编程代码

​ //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,

​ //解决断链—>恢复到断链之前的一个效果–修复断链

​ //.end()方法恢复到断链之前的效果

​ //例子 $(this).prevAll().css(“backgroundColor”,“yellow”).end().nextAll().css(“backgroundColor”,“blue”);

获取兄弟元素的方法

​ .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后面的第一个兄弟元素p标签元素

​ //$("#dv+p").css(“backgroundColor”,“red”);

​ //获取的是div后面所有直接的兄弟元素p标签元素

​ //$("#dv~p").css(“backgroundColor”,“red”);

​ 获取当前子元素

​ .find(“标签名”);找后代的 当前元素下的这个标签

​ .children(“标签名”)

​ $(“父集元素 > 子元素”)

​ //获取的是div中所有的直接的子元素（子代选择器）

​ //$("#dv>p").css(“backgroundColor”,“red”);

/*

​ *

* DOM中创建元素:

​ * 1.document.write(“标签代码”);缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉

​ * 2.innerHTML

​ * 3.document.createElement(“标签的名字”)

​ *

​ * jQuery中创建元素的方式:

​ * 1.$(“标签的代码”)

​ * 2.对象.html(“标签的代码”);

​ *

​ * */

​ 1、$(“需要创建的元素”) 事后需要追加到父元素

​ 2、.html(“需要创建的元素”) 需要重新加载页面，效率比较慢。

追加元素

​ .append(“需要追加的元素”) 一般加在父元素子集的最后

​ //append方法把页面一个原有的元素添加到另一个元素中的时候,有点剪切的效果

​

​ // 把需要追加的元素主动追加到另一个元素

​ “需要追加的元素”.appendTo(“父元素”)

​ .prepend(“需要追加的元素”)把元素插入到父集元素子元素的最前面

​ .after(“需要追加的元素”)把元素添加到当前元素的后面(来添加兄弟元素) 紧挨着这个元素

​ .before(“需要追加的元素”)把元素添加到当前元素的前面(来添加兄弟元素) 紧挨着这个元素

清空元素中的内容

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

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

​ .clone() //克隆,复制了这个元素

自定义属性

​ .attr();可以写两个参数:1参数；属性,2属性值 给这个元素设置属性（设置值的时候推荐这个方法）

​ //attr();只写了一个参数,获取该元素的这个属性的值，如果这个值没设获取返回的值就是undefined

​ .prop() 写两个参数就是设置新的属性给这个元素 （只能设DOM自带的属性）

​ 写一个参数就是获取到这个属性如果这个属性是自定义属性并且没设的时候就是返回undefined 如果这个属性是DOM自带的属性 哪怕没设也会返回它默认的值而不是undefined （获取的时候建议用这个）

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

​ //console.log($("#dv").offset().left);

​ //console.log($("#dv").offset().top);

获取元素的宽和高

​ var width=parseInt($("#dv").css(“width”))*2;

​ var height=parseInt($("#dv").css(“height”))*2;

​ //设置样式

​ $("#dv").css(“width”,width+“px”);

​ $("#dv").css(“height”,height+“px”);

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

//获取宽和高的属性值---->数字类型

​ var width=$("#dv").width()*2;

​ var height=$("#dv").height()*2;

​ //设置元素的宽和高—>参数可以是数字也可以是字符串

​ $("#dv").width(width);

​ $("#dv").height(height);

获取的卷曲出去的距离----->数字类型

​ .scrollLeft() 横向卷出去的距离

​ .scrollTop() 纵向卷出去的距离

为元素绑定多个事件

​ 1、 $(“需要添加事件的元素”).bind({“参数1”:function(){},“参数1”：function(){},…})

​ 方法:第一个参数是事件名字(click,mouseover, mouseout…),

​ 第二个参数是事件处理函数-匿名函数

​ 还可以为一个元素添加多种不同的事件，这些事件都执行相同的函数 例如：

​ $("#btn").bind(“mouseover mouseout”,function () {

// i++;

// console.log(i);

// });

事件委托

​ 2、 $(“需要添加事件的父元素”).delegate(“这个真正需要添加的子元素”,“事件名”,“事件处理函数”)

​

​ delegate:

​ 参数:3个

​ 1.要绑定事件的元素—p

​ 2.要绑定的事件的名字—click

​ 3.绑定事件的处理函数—匿名函数

​

​ 3、 * on方法： 两个参数:1事件的名字,2事件处理函数

​ * on方法: 三个参数: 1,事件的名字, 2.要绑定事件的元素–p,3事件处理函数

​ * on是父级元素调用,目的:为子级元素去绑定事件

​ 父级元素.on(“事件类型”,“子级元素”,事件处理函数);

解绑事件

​ .unbind(“要解绑的事件的名字”)

​ .undelegate(“那个真正要绑定的子元素”,“要解绑的事件的名字”);//解绑

​ .off() 参数:要解绑的事件的名字

​ 注意：

​ 如果只给父集元素设点击事件，则这个事件会冒泡到子集，用 off解绑时 会遇见以下情况

​ 1、$("#dv").off(“click”); // 这里把父集的点击事件解绑 而子集的点击事件还存在

​

​ 2、$("#dv").off(“click”,"**");// 把子级元素的点击事件解绑了,父级元素的点击事件还存在

​

​ 3、$("#dv").off();//移除父级元素和子级元素的所有的事件

​ /*

​ *

​ * bind

​ * unbind

​ *

​ * on

​ * off

​ *

​ * delegate

​ * undelegate

​ *

​ *

​ * */

​ 1.这些绑定事件都是一一对应的 轻易不要岔着用

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

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

触发事件–3三种方式

​ 点击第二个按钮调用第一个按钮的点击事件—触发第一个按钮的事件

​ 1.直接设置.focus()事件

​ 2.trigget(“focus”)方法中需要写上触发事件的名字

​ //$("#btn1").trigger(“focus”);//触发事件

​ 3…triggerHandler(“触发事件的名字”)

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

​ //第三种触发事件的方式不会触发浏览器的默认事件

事件对象

​ 获取函数在调用的时候,有几个参数//console.log(arguments.length);

​ 1.event.delegateTarget----->div—>谁代替元素绑定的事件–div

​ 2.event.currentTarget----->input—>真正是谁绑定的事件

​ 3.event.target---->input----触发的事件自身

键盘值 65-90 对应 A-Z

事件冒泡与清除事件冒泡

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

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

​ return false;//取消事件冒泡 //取消超链接的默认的点击事件