jQuery 总结

Tips

$(function(){}) 页面加载完成后运行

获取元素

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

let iptBookName = $('#iptBookName').val().trim(); 获取值并且去掉前后空格

 

:first：默认情况下是相对整个页面来说的第一个，如：li:first表示整个页面的第一个li元素，而ul li:first表示整个页面的第一个li元素，并且是在ul下的子元素； :last：同上了，只是是最后一个而已； :first- child：为每个父元素匹配第一个子元素，如li:first-child返回每个ul的第一个li元素。可以这样理解，页面中的元素有相同的父元素 的，并且里面又包含li元素的，那么就取第一个li元素，每个子类集合都要进行判断，直到找出所有符合要求的li元素； :last-child：这个也与上面相对了，只是取的是最后一个； :only- child：返回所有没有兄弟节点的元素，注意，文本元素不是，也就是说类似这样的<div>hellojquery</div>，对于这段会选出<a>元素；对 于$(”label:only-child“)会选出是label元素，同时它是它父类唯一的子元素的label元素； :nth-child(n)：返回第n个子节点，n从1开始，如果n取0，那么就会选择所有的元素。如：[*]li:nth-child(2)返回li元素，并且该元素是其父元素的第二个子元素； :nth-child(even|odd)：返回偶数或奇数的子节点； :nth-child(An+B)：返回满足表达式An+B的所有子节点，比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素； :even：页面范围内的处于偶数位置的元素，如：li:even返回全部偶数li元素； :odd：页面范围内的处于奇数位置的元素； :eq(n)：第n个匹配的元素(n从0开始)，如：li:eq(3)返回整个页面的第四个li元素，ul li:eq(1)返回页面中第一个ul元素下的第二个li元素，注意：只匹配一次就返回了； :gt(n)：第n个匹配元素(不包括)之后的元素(n从0开始)，如：ul:gt(2)返回从第3个ul开始的所有ul元素(含第三个)； :lt(n)：第n个匹配元素(不包括)之前的元素(n从0开始)，如：ul:lt(2)返回从第0个和第1个ul元素；

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

拼接变量

$("[skunum='"+spuid+"']")

$(selector).html()      //当使用该方法返回一个值时，它会返回第一个匹配元素的内容。

绑定事件

$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

设置元素

设置元素css属性 $("p").css("background-color","red");

 

括号里有内容为设置，没有为返回

• text() - 设置或返回所选元素的文本内容

• html() - 设置或返回所选元素的内容（包括 HTML 标记）

• val() - 设置或返回表单字段的值

$('#iptBookName').val(''); 设置值

$(selector).html(content)       //当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

元素隐藏和显示

$(selector).hide(speed,callback);
​
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

遍历对象，拼接到页面代码

//res.data 多组数据 ，i 第i组 ，item 遍历的当前组的对象                
$.each(res.data, function(i, item) {
​
•                  rows.push('<tr> <td>' + item.id + '</td> <td>' + item.bookname + '</td> <td>' + item.author + '</td> <td>' + item.publisher + '</td> <td><a href="javascript:;" class="del" data-id=' + item.id + '>删除</td> </tr>')
​
•                })
​
•                $('#tbody').empty().append(rows.join(""));

标签内添加删除html内容

• append() - 在被选元素的结尾插入内容

• prepend() - 在被选元素的开头插入内容

• after() - 在被选元素之后插入内容

• before() - 在被选元素之前插入内容

 

• remove() - 删除被选元素（及其子元素）

• empty() - 从被选元素中删除子元素

  $("p").remove(".italic");                   //删除 class="italic" 的所有 <p> 元素：

控制鼠标滚轮的库

jquery.mousewheel.js

resetui() 使滚动条滑到最底下

与ajax协同

$(selector).load(URL,data,callback);

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

 

.serialize()	将表单内容序列化为字符串。

jQuery HTML / CSS 方法

下面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法。

下面的方法适用于 HTML 和 XML 文档。除了：html() 方法。

方法	描述
addClass()	向被选元素添加一个或多个类名
after()	在被选元素后插入内容
append()	在被选元素的结尾插入内容
appendTo()	在被选元素的结尾插入 HTML 元素
attr()	设置或返回被选元素的属性/值
before()	在被选元素前插入内容
clone()	生成被选元素的副本
css()	为被选元素设置或返回一个或多个样式属性
detach()	移除被选元素（保留数据和事件）
empty()	从被选元素移除所有子节点和内容
hasClass()	检查被选元素是否包含指定的 class 名称
height()	设置或返回被选元素的高度
html()	设置或返回被选元素的内容
innerHeight()	返回元素的高度（包含 padding，不包含 border）
innerWidth()	返回元素的宽度（包含 padding，不包含 border）
insertAfter()	在被选元素后插入 HTML 元素
insertBefore()	在被选元素前插入 HTML 元素
offset()	设置或返回被选元素的偏移坐标（相对于文档）
offsetParent()	返回第一个定位的祖先元素
outerHeight()	返回元素的高度（包含 padding 和 border）
outerWidth()	返回元素的宽度（包含 padding 和 border）
position()	返回元素的位置（相对于父元素）
prepend()	在被选元素的开头插入内容
prependTo()	在被选元素的开头插入 HTML 元素
prop()	设置或返回被选元素的属性/值
remove()	移除被选元素（包含数据和事件）
removeAttr()	从被选元素移除一个或多个属性
removeClass()	从被选元素移除一个或多个类
removeProp()	移除通过 prop() 方法设置的属性
replaceAll()	把被选元素替换为新的 HTML 元素
replaceWith()	把被选元素替换为新的内容
scrollLeft()	设置或返回被选元素的水平滚动条位置
scrollTop()	设置或返回被选元素的垂直滚动条位置
text()	设置或返回被选元素的文本内容
toggleClass()	在被选元素中添加/移除一个或多个类之间切换
unwrap()	移除被选元素的父元素
val()	设置或返回被选元素的属性值（针对表单元素）
width()	设置或返回被选元素的宽度
wrap()	在每个被选元素的周围用 HTML 元素包裹起来
wrapAll()	在所有被选元素的周围用 HTML 元素包裹起来
wrapInner()	在每个被选元素的内容周围用 HTML 元素包裹起来
$.escapeSelector()	转义CSS选择器中有特殊意义的字符或字符串
$.cssHooks	提供了一种方法通过定义函数来获取和设置特定的CSS值