jQuery学习小结-1 - 爱站程序员基地-爱站程序员基地

jQuery

概念

Query是一个JavaScript库，它通过封闭原生JavaScript函数得到一整套定义好的方法。
针对DOM的库

功能

像CSS那样访问和操作DOM
修改CSS控制页面外观
简化JavaScript代码操作
事件处理更加容易
各种动画效果使用方便
让Ajax技术更加完美
基于jQuery大量插件
自行扩展功能插件

优势

方便
兼容性好

代码风格

采用连缀方式，可以不停的连续调用功能函数

$(\"div\").text(\"你好\").css(\"width\",\"50px\").attr(\"abc\",\"a\");

jQuery对象

\”$\”是jQuery对象，是最重要而且独有的对象
列表对象，即使选择的只有一个，也是列表对象，所以操作的内容是针对列表中所有元素的
不能使用DOM的方法和事件
jQuery对象的方法仅针对jQuery对象使用，DOM对象不能使用
如果要使用DOM方法或事件，需要转换为DOM对象

将jQuery转换成DOM元素

$(\"div\")[0]$(\"div\")[0].get();//获取jQuery对象的数组Array.from($(\"div\"));//

//获取jQuery对象的DOM数组

$(\"div\").get();Array.from($(\"div\"));

如果希望将DOM转换为jQuery对象，可以直接放在$()函数中
将nodeList或者HTMLCollection转换为jQuery转换为jQquery列表
```
var div=document.querySelector(\"div\");console.log($(div));
```
将jQuery列表中第几个元素筛选出jQuery新对象
```
$(\"div\").eq(0)
```

jQuery选择器

标签名选择器
```
$(\"div\");
```
id选择器
```
$(\"#div1\");
```
class选择器
```
$(\"#div1\");
```
通配符选择器
```
$(\"*\");
```

后代选择器

$(\"div .div1\");//div后代中类名是div1的元素$(\"div.div1\");//div中类名是div1的div

子代选择器

$(\"div>.div1\");$(\".div1>*\");//类名是div1的元素的所有子元素

下一个兄弟选择器

$(\".div1+div\");// div1下一个任意兄弟元素$(\".div1+*\");$(\".div1+\");$(\".div1\").next()

下面所有的兄弟选择器

$(\".div1~div\");$(\".div1~\");//所有的兄弟元素$(\".div1\").nextAll();//等同于$(\".div1~\")

上一个兄弟元素
```
$(\".div1\").prev();
```
上面的所有兄弟元素
```
($(\".div2\").prevAll()
```
向上到div1的直接兄弟元素，不包括div1
```
$(\".div2\").prevUntil(\".div1\")
```

属性选择器，示例如下：

console.log($(\"[a]\"));console.log($(\"[a=1]\"));//标签必须有a属性，并且属性值为1console.log($(\"[a^=1]\"));//属性值的开头是1的元素$(\"[b|=ab]\").css(\"color\",\"red\");//属性值是ab或者以ab开头后面用-来连接的元素$(\"[b~=ab]\").css(\"color\",\"green\");//属性值是ab或者值是以空格区分，并且中间包含ab的元素console.log($(\"[b$=b]\"));//属性值以b结尾的所有元素console.log($(\"[b!=ab]\"));//属性值不是ab的所有元素console.log($(\"[b*=c]\"));//属性值中包含c这个字符的console.log($(\"[a][b]\"));//有属性a和属性b的元素

js不区分大小写，所有标签属性在命名时，使用-命名

过滤器

//将所有li放在一个列表中，筛选出第一个元素$(\"li:first\").css(\"color\",\"red\");$(\"li\").first();//将每个li父元素中的第一个子元素，如果是li的筛选出来，如果第一个子元素不是li，就不选择(\"li:first-child\").css(\"color\",\"red\");//将每个li父元素中第一个li类型的子元素筛选出来，可能不是该父元素的第一个子元素$(\"li:first-of-type\").css(\"color\",\"red\");//将所有li放在一个列表中，筛选出最后一个元素$(\"li:last\");$(\"li\").last();// 将每个li父元素中的最后一个子元素，如果是li的筛选出来，如果不是li，就不选择$(\"li:last-child\")//将每个li父元素中最后一个li类型是子元素筛选出来，可能不是该父元素的最后一个子元素$(\"li:last-of-type\");//将ul的所有子元素中不是li的元素筛选出来$(\"ul>:not(li)\");$(\"ul\").not();//筛选下标为偶数的li元素 列表是从0开始计数的$(\"li:even\").css(\"color\",\"red\");//筛选下标为奇数的li元素  列表是从0开始计数的$(\"li:odd\").css(\"color\",\"red\");//每个父元素中第1个子元素，如果是li，则选中，如果不是，则不在该父元素中选择$(\"li:nth-child(1)\").css(\"color\",\"red\");//选择每个父元素中第1个li元素，在父元素的所有子元素中筛选，第一个li元素可能不是该父元素的第一个子元素$(\"li:nth-of-type(1)\").css(\"color\",\"red\");//在每个父元素中筛选下标为偶数的子元素，如果是li就选择，如果不是，就不选择   列表是从1开始计数$(\"li:nth-child(even)\").css(\"color\",\"red\");//在每个父元素中筛选下标为偶数的li子元素   列表是从1开始计数$(\"li:nth-of-type(even)\").css(\"color\",\"red\");//在每个父元素中筛选下标为奇数的子元素，如果是li就选择，如果不是，就不选择   列表是从1开始计数$(\"li:nth-child(odd)\").css(\"color\",\"red\");//在每个父元素中筛选下标为奇数的li子元素   列表是从1开始计数$(\"li:nth-of-type(odd)\").css(\"color\",\"red\");//筛选下标为偶数的li元素$(\"li:nth-child(2n)\");//筛选下标为奇数的li元素$(\"li:nth-child(2n-1)\");//筛选下标为奇数的li元素$(\"li:nth-child(3n)\");//列表中下标等于2的元素$(\"li:eq(2)\").css(\"color\",\"red\");$(\"li\").eq(2);//列表中下标大于2的所有元素$(\"li:gt(2)\").css(\"color\",\"red\");//列表中下标小于2的所有元素$(\"li:lt(2)\").css(\"color\",\"red\");//所有h1-h6的元素$(\":header\");//所有使用animate动画的元素$(\":animated\");//所有聚焦的元素$(\":focus\");//没有内容或者子元素的元素$(\":empty\");//没有内容或者子元素的div$(\"div:empty\");//含有div2内容的div1元素$(\".div1:has(.div2)\");$(\".div1\").has(\".div2\");//判断div2有子元素或内容$(\".div1:parent\");//获取div2的父元素$(\".div2\").parent();//获取div2的所有父元素$(\".div2\").parents();//获取div2的所有父元素中到html之前的父元素$(\".div2\").parentsUntil(\"html\");//判断元素或元素的后代中是否有内容1$(\".div2:contains(1)\");$(\".div1:contains(1)\");//隐藏元素，针对display:none或者不显示的元素,visibility:hidden不是隐藏，因为它占位了;$(\":hidden\");//隐式显示的元素$(\":visible\");//只有一个子元素的元素$(\":only-child\");//得到布尔值，是否在div中有类名是div1的元素$(\"div\").is(\".div1\");//得到布尔值，是否在div中有类名是div1的元素，仅针对class$(\"div\").hasClass(\".div1\");//div列表中选择第2个到底4个之间的元素$(\"div\").slice(2,4);//所有的input$(\":input\");//所有type是text的input$(\":text\");//不可用$(\":disabled\");//可用$(\":enabled\");//用于input中checkBox和radio$(\":checked\");//用于下拉菜单的元素$(\":selected\");

jQuery的遍历

数组遍历

var arr=[1,2,3,4];$.each(arr,function(index,item){console.log(index,item);});

对象遍历，只能进行广度遍历

var obj={a:1,b:2,c:3}$.each(obj,function(key,value){console.log(key,value);});

遍历DOM对象

// 静态方法遍历DOM对象$.each($(\"div\"),function(index,item){console.log(index,item);})// 实例化元素的方法遍历DOM对象$(\"div\").each(function(index,item){console.log(index,item);})

jQuery的内容

设置和获取内容

$(\"div\").html(\"\")//等同于div.innerHTML$(\"div\").html(\"你好\");//给每个div添加内容 你好$(\"div\").html(\"<span>你好</span>\");//给每个div添加span元素$(\"div\").html();//获取列表中第一个元素的内容

将div标签中的内容用a标签包裹

<div>网易</div><div>百度</div><div>腾讯</div><div>淘宝</div>

var arr=[\"http://www.163.com\",\"http://www.baidu.com\",\"http://www.qq.com\",\"http://www.taobao.com\"];$(\"div\").html(function(index,item){//两种方法都可以// return \"<a href=\'\"+arr[index]+\"\'>\"+item+\"</a>\";return `<a href=${arr[index]}>${item}</a>`})

将所有列表中的元素的内容合成一个字符串
```
$(\"div\").text();
```

将div中的内容替换成数组中的内容

var arr=[\"北京\",\"上海\",\"深圳\",\"天津\"];$(\"div\").text(function(index){return arr[index];})

给input添加input事件，返回输入的内容

$(\"input\").on(\"input\",function(){// 两种方式都可以// console.log(this.value);});

给input设置内容

$(\"input\").val(10);$(\"input\").val(function(index){return index+1;})

jQuery的属性

attr() 方法

设置或返回被选元素的属性值

当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。

//只能获取到列表中第一个元素的a属性值$(\"div\").attr(\"a\");//给多个div设置同一个标签属性，同一个值$(\"div\").attr(\"b\",10);//给多个div设置同一个标签属性，不同的值$(\"div\").attr(\"c\",function(index,item){return index+1;})// 设置多个不同属性$(\"div\").attr({b:1,c:function(index,item){return index+1;}})

prop()方法

设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对

//给div对象增加对象属性a=10$(\"div\").prop(\"a\",\"10\");//使用$(\"div\").a时会生成一个对象，在打印时，如果使用$(\"div\").a，会重新生成一个新对象，新对象没有a的值$(\"div\").a=\"10\";console.log($(\"div\").a);// list是创建的对象，在对象上增加一个对象属性，可以获取到var list=$(\"div\");list.a=10;console.log(list.a);//jQuery列表中所有DOM对象属性增加了b$(\"div\").prop(\"b\",\"10\");//从列表中取第一个元素的DOM对象属性b的值console.log((\"div\").prop(\"b\"));

data()方法

向被选元素附加数据，或者从被选元素获取数据

//设置在一个jQuery映射对象上$(\"div\").data(\"abc\",0);console.log( $(\"div\").data(\"abc\"));

删除属性

$(\"div\").removeAttr(\"a\");$(\"div\").removeProp(\"a\");$(\"div\").removeData(\"a\");

三者的区别

prop是设置在DOM对象上的对象属性，
data是设置在jQuery映射对象上的属性，为了不污染DOM对象的属性

jQuery的css样式

设置css样式

$(\"div\").css(\"background\",\"red\");$(\"div\").css(\"width\",\"50\");$(\"div\").css(\"height\",\"50\");$(\"div\").css(\"width\",function(index,item){return (index+1)*50;});//设置不同div设置相同样式$(\"div\").css({width:50,height:40,background:\"red\",border:\"1px solid #000\"});//给不同div设置不同样式$(\"div\").css({width:function(index,item){return (index+1)*50;},height:function(index,item){return (index+1)*50;},backgroundColor:function(index,item){var color=\"#\";for(var i=0;i<6;i++){color+=Math.floor(Math.random()*16).toString(16);}return color;},border:\"1px solid #000000\"});

获取样式

不仅可以获取行内样式的值，还可以获取css设置的计算后样式的值
```
console.log($(\"div\").css(\"width\"));
```

获取第一个元素的指定样式，返回一个对象

$(\"div\").css([\"width\",\"height\",\"background\"])

给元素增加/删除class类名

// 给所以div增加div1类名$(\"div\").addClass(\"div1\");//删除所有div的div1类名$(\"div\").removeClass(\"div1\");

切换div的样式

var bool=false;$(\"div\").on(\"click\",function(){bool=!boolif(bool){$(this).removeClass(\"div1\").addClass(\"div2\");}else{$(this).removeClass(\"div2\").addClass(\"div1\");}})//切换样式 没有删除，只是点击新增或删除一个新的class类$(\"div\").on(\"click\",function(){$(this).toggleClass(\"div2\");})

获取各种宽高

内容宽高

//获取内容的宽$(\"div\").width();//获取内容的高$(\"div\").height();//设置内容的宽高$(\"div\").width(100).height(10);//设置多个元素的宽度$(\"div\").width(function(index,item){return (index+1)*50;});

宽度/高度+padding

//获取$(\"div\").innerWidth();$(\"div\").innerHeight();//设置$(\"div\").innerWidth(100);//width=100-padding$(\"div\").innerHeight(100);

宽度/高度+padding+border

//获取$(\"div\").outerWidth();$(\"div\").outerHeight();//设置$(\"div\").outerWidth(100);宽度=100-padding-border

宽度/高度+padding+border+margin，只能获取，不能设置
```
$(\"div\").outerWidth(true);$(\"div\").outerHeight(true);
```

元素相对于页面左上角的位置

//获取$(\"div\").offset();//设置元素相对页面左上角的位置$(\".div3\").offset({left:500,top:500});

定位位置，与offsetLeft，offsetTop相同，不能设置
```
$(\"div\").position();
```

滚动条位置

//获取$(\"div\").scrollTop();//设置滚动条位置$(\"div\").scrollTop(1000);

jQuery的DOM对象

创建节点
```
var div=$(\"<div></div>\");
```
插入节点

append(content)

将content内容插入到父元素内部后面

返回指定父元素的jQuery对象

//向div内部插入strong节点$(\"div\").append(\"<span></span>\")//使用匿名函数向指定元素内部后面插入节点$(\"div\").append(function(index,item){return \"<span>\"+index+\"</span>\";});

appendTo(content)

将指定元素插入到指定父元素content内部后面

返回指定元素的jQuery对象
```
$(\"<div></div>\").appendTo(\"body\");
```

prepend(content)

将指定元素content插入到指定父元素内部的前面

//将div插入到div1的第一个子元素前面$(\".div1\").prepend(\"<div></div>\");//向每个div内部第一个子元素位置插入span$(\"div\").append(function(index,item){return \"<span>\"+index+\"</span>\";})

prependTo(content)

将指定元素插入到指定父元素content内部前面

//将div插入在div1第一个子元素位置$(\"<div></div>\").prependTo(\".div1\");

after(content)

将content内容插入在指定兄弟元素后面

//将div插入到div1后面$(\".div1\").after(\"<div></div>\");

insertAfter(content)

将指定元素插入到指定兄弟元素content后面

//将div插入到div1后面$(\"<div></div>\").insertAfter(\".div1\");

before(content)

将content内容插入到指定兄弟元素的前面

//将div插入到div前面$(\".div1\").before(\"<div></div>\");

insertBefore(content)

将指定元素插入到兄弟元素content前面

//将div插入到div1前面$(\"<div></div>\").insertBefore(\".div1\");

包裹节点

wrap(html)

给指定元素包裹一层html代码

//给每个div外面包裹一个a标签$(\"div\").wrap(\"<a></a>\");

wrapInner(html)

给指定元素的子内容包裹一层html，包括子元素

//给div的子元素或内容外面包裹一层a标签$(\"div\").wrapInner(\"<a></a>\");

wrapAll(element)

用DOM对象将所有元素包裹在一起

//给所有div外面包裹一个a标签$(\"div\").wrapAll(\"<a></a>\");

unwrap()

将包裹的父元素删除

//将包裹div的父元素删除$(\"div\").unwrap();

复制节点，都是深复制

clone(true)

参数可以为空，表示只复制元素和内容，不复制事件行为。

参数为true时，表示复制元素时附带将事件处理行为也复制出来

$(\"div\").clone(false);//不复制事件$(\"div\").clone(true);//连带事件一起复制

替换节点

节点被替换后，所包含的事件行为全部消失

replaceWith(html)

将指定节点替换成html节点

//将div1替换成a$(\".div1\").replaceWith(\"<a></a>\");

replaceAll(element)

将element用指定元素替换

//将div1替换成a$(\"<a></a>\").replaceAll(\".div1\");

删除节点

remove()

删除元素时，将所有元素的事件一起删除

//将div1删除
$(\”.div1\”).remove();

detach()

删除元素时，不会删除事件，仅删除元素

//将div1删除$(\".div1\").detach();

empty()

清除元素的所有子元素和内容

//清除div1的所有子元素和内容$(\".div1\").empty();

jQuery的事件

jQuery的事件被重新封装，不能使用addEventListener()侦听事件，也不能使用dispatchEvent()抛发事件

使用on()侦听事件，off()删除事件

$(\"div\").on(\"click\",function(e){console.log(e);$(this).of(\"click\");});

使用命名空间解决删除事件的问题

$(\"div\").on(\"click\",function(e){console.log(e);console.log(\"a\");//此时删除事件时，会将下面连缀执行的侦听事件也删除，不能继续执行$(this).of(\"click\");}).on(\"click\",function(){console.log(\"b\");})$(\"div\").on(\"click.a\",function(e){console.log(e);console.log(\"a\");//此时删除事件时，只会删除click.a，不会删除click.b，click.b还可以继续执行$(this).of(\"click.a\");}).on(\"click.b\",function(){console.log(\"b\");})

事件传参

var obj={a:1,b:function(){// 事件本身是可以传参的$(\"div\").on(\"click\",this,function(e){console.log(e);// console.log(this);// e.data也就是obj,也就是上面传入的thisconsole.log(e.data);})$(\"div\").on(\"click\",{a:this.a,b:10},function(e){//e.data就是obj 也就是上面传入的thisconsole.log(e.data);})}}obj.b();

事件抛发

trigger(event,data);

会冒泡，但这种冒泡是自定义事件才能体现，是jQuery扩展于DOM的机制，并非DOM特性
可以传参data，默认没有参数
抛发事件时，会触发默认事件
只会影响第一个匹配到的元素，只抛发给第一个匹配到的元素

返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。

$(\"div\").on(\"abc\",function(e,o){console.log(e,o);// 当抛发的参数是对象时，o是新抛发的数据，即抛发时的参数});$(\"div\").trigger(\"abc\");//抛发事件  可以传参$(\"div\").trigger(\"abc\",{a:1,b:10});//可以传参$(\"div\").on(\"abc\",function(e,a,b){console.log(e,a,b);//当抛发是参数是数组时，匿名函数中除了e之外的所有参数分别对应数组的每一项});$(\"div\").trigger(\"abc\",[10,100]);

triggerHandler(event)

不会冒泡

抛发事件时，不会触发默认事件
会影响所有匹配到的元素，会抛发给所以匹配到的元素

会返回当前事件执行的返回值，如果没返回值，返回undefined

$(\"form\").on(\"submit\",function(e){console.log(e);return \"abc\";})$(\"form\").triggerHandler(\"submit\");

所有的事件都不允许有return

事件的简写

所有事件都能写成简写事件，简写事件用off()删除

 $(\"div\").click(function(){$this.css(\"background\",\"red\");})

利用事件简写实现拖拽

$(\"div\").mousedown(function(e){var div=$(this);e.preventDefault();$(document).mousemove(function(e1){div.css({eft:e1.clientX-e.offsetX,top:e1.clientY-e.offsetY});}).mouseup(function(){$(this).off(\"mousemove\",\"mouseup\");});});

$(document).ready()

当DOM全部创建完成后，图片没有加载完成前执行
针对document

window.οnlοad=function(){}

针对window

hover()

鼠标经过/离开时触发

$(\"div\").hover(function(){// 鼠标经过时$(this).css(\"background\",\"green\");},function(){// 鼠标离开时$(this).css(\"background\",\"red\");})

e.stopPropagation()

取消冒泡

e.preventDefault()

阻止默认事件

isDefaultPrevented();//是否调用了e.preventDefault()isPropagationStoped();//是否调用了e.stopPropagation()stopImmediaPropagation();//取消事件冒泡，取消默认事件

jQuery学习小结——1