offset相對(duì)于頁(yè)面來(lái)說(shuō) position相對(duì)于上層的父元素

獲取/設(shè)置標(biāo)簽的位置數(shù)據(jù)

? * offset(): 相對(duì)頁(yè)面左上角的坐標(biāo)

? * position(): 相對(duì)于父元素左上角的坐標(biāo)

1. scrollTop():

? 讀取/設(shè)置滾動(dòng)條的Y坐標(biāo)

2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()

? 讀取頁(yè)面滾動(dòng)條的Y坐標(biāo)(兼容chrome和IE)

3. $('body,html').scrollTop(60);

? 滾動(dòng)到指定位置(兼容chrome和IE)

scrollTop():實(shí)現(xiàn)回到頂部功能

$('#to_top').click(function () {
?? // 瞬間滾到頂部
???? //$('html,body').scrollTop(0)
???? //循環(huán)定時(shí)器實(shí)現(xiàn)緩慢移動(dòng);
?????? var distance = $('html').scrollTop()+$('body').scrollTop() //滾動(dòng)條移動(dòng)的長(zhǎng)度
?????? var times=500? //總時(shí)間500
?????? var smalltime=50? //間隔時(shí)間
?????? var? samlldis=distance/(times/ smalltime)
????? //設(shè)置定時(shí)器循環(huán)調(diào)用；
????? var tim=setInterval(function () {
??????? distance-= samlldis
??????????? if(distance<=0)
??????????? {
????????????? distance=0
????????????? clearInterval(tim)
??????????? }
??????????? $("body,html").scrollTop(distance)

????? },50 )
})

?

?

9：

1. 內(nèi)容尺寸

? height(): height

? width(): width

2. 內(nèi)部尺寸

? innerHeight(): height+padding

? innerWidth(): width+padding

3. 外部尺寸

? outerHeight(false/true): height+padding+border? 如果是true, 加上margin

? outerWidth(false/true): width+padding+border 如果是true, 加上margin

?

10：過(guò)濾元素

在jQuery對(duì)象中的元素對(duì)象數(shù)組中過(guò)濾出一部分元素來(lái)

1. first()

2. last()

3. eq(index|-index)

4. filter(selector)

5. not(selector)

6. has(selector)

?

//獲取所有的ul下的li

??????? $lis = $("ul li")

??????? //?? 1. ul下li標(biāo)簽第一個(gè)

???????? //? $lis.first().css("background","red")

??????? // 2. ul下li標(biāo)簽的最后一個(gè)

?????????? // $lis.last().css("background","red")

??????? // 3. ul下li標(biāo)簽的第二個(gè)

???????? // $lis.eq(1).css("background","red")

??????? // 4. ul下li標(biāo)簽中title屬性為hello的

????????? //$lis .filter("[title=hello]").css("background","red")

??????? // 5. ul下li標(biāo)簽中title屬性不為hello的

?????? // $lis .filter("[title!=hello]").css("background","red")

????? // $lis.not("[title=hello]").css("background","red")

??????? // 6. ul下li標(biāo)簽中有span子標(biāo)簽的

??????? $lis.has('span').css('background', 'red')

//篩選是從一組中選擇出一部分出來(lái)

//查找是查找兄弟，父母和后代元素

? 1. children(): 子標(biāo)簽中找

2. find() : 后代標(biāo)簽中找

3. parent() : 父標(biāo)簽

4. prevAll() : 前面所有的兄弟標(biāo)簽

5. nextAll() : 后面所有的兄弟標(biāo)簽

6. siblings() : 前后所有的兄弟標(biāo)簽

?

///全選按鈕，選擇器

?

// 1. 點(diǎn)擊'全選': 選中所有愛(ài)好

? $('#checkedAllBtn').click(function () {

??? $items.prop('checked', true)

??? $checkedAllBox.prop('checked', true)

? })

?

? // 2. 點(diǎn)擊'全不選': 所有愛(ài)好都不勾選

? $('#checkedNoBtn').click(function () {

??? $items.prop('checked', false)

??? $checkedAllBox.prop('checked', false)

? })

?

? // 3. 點(diǎn)擊'反選': 改變所有愛(ài)好的勾選狀態(tài)

? $('#checkedRevBtn').click(function () {

??? $items.each(function () {

????? this.checked = !this.checked

??? })

??? $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)

? })

?

? //4. 點(diǎn)擊'提交': 提示所有勾選的愛(ài)好

? $('#sendBtn').click(function () {

??? $items.filter(':checked').each(function () {

????? alert(this.value)

??? })

? })

?

? // 5. 點(diǎn)擊'全選/全不選': 選中所有愛(ài)好, 或者全不選中

? $checkedAllBox.click(function () {

??? $items.prop('checked', this.checked)

? })

?

? // 6. 點(diǎn)擊某個(gè)愛(ài)好時(shí), 必要時(shí)更新'全選/全不選'的選中狀態(tài)

? $items.click(function () {

??? $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)

? })

1. 添加/替換元素

? * append(content)

??? 向當(dāng)前匹配的所有元素內(nèi)部的最后插入指定內(nèi)容

? * prepend(content)

??? 向當(dāng)前匹配的所有元素內(nèi)部的最前面插入指定內(nèi)容

? * before(content)

??? 將指定內(nèi)容插入到當(dāng)前所有匹配元素的前面

? * after(content)

??? 將指定內(nèi)容插入到當(dāng)前所有匹配元素的后面替換節(jié)點(diǎn)

? * replaceWith(content)

??? 用指定內(nèi)容替換所有匹配的標(biāo)簽刪除節(jié)點(diǎn)

2. 刪除元素

? * empty()

??? 刪除所有匹配元素的子元素

? * remove()

??? 刪除所有匹配的元素

??????? ///添加刪除元素的練習(xí)

?

? $('#addEmpButton').click(function () {

??? //1. 收集輸入的數(shù)據(jù)

??? var $empName = $('#empName')

??? var $email = $('#email')

??? var $salary = $('#salary')

??? var empName = $empName.val()

??? var email = $email.val()

??? var salary = $salary.val()

?

??? //2. 生成對(duì)應(yīng)的<tr>標(biāo)簽結(jié)構(gòu), 并插入#employeeTable的tbody中

??? /*

???? <tr>

?????? <td>Bob</td>

?????? <td>bob@tom.com</td>

?????? <td>10000</td>

?????? <td><a href="deleteEmp?id=003">Delete</a></td>

???? </tr>

???? */

??? var $xxx = $('<tr></tr>')

????? .append('<td>'+empName+'</td>') // 拼串

????? .append('<td>'+email+'</td>')

????? .append('<td>'+salary+'</td>')

????? .append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>')

????? .appendTo('#employeeTable>tbody')

????? .find('a')

????? .click(clickDelete)

?

??? //3. 清除輸入

??? $empName.val('')

??? $email.val('')

??? $salary.val('')

? })

?

? // 給所有刪除鏈接綁定點(diǎn)擊監(jiān)聽(tīng)

? $('#employeeTable a').click(clickDelete)

?

? /*

? 點(diǎn)擊刪除的回調(diào)函數(shù)

?? */

? function clickDelete () {

??? var $tr = $(this).parent().parent()

??? var name = $tr.children(':first').html()

??? if(confirm('確定刪除'+name+'嗎?')) {

????? $tr.remove()

??? }

?

??? return false

轉(zhuǎn)載于:https://www.cnblogs.com/love-life-insist/p/9063689.html

總結(jié)

以上是生活随笔為你收集整理的jQuery工具和方法（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。