當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery基本操作

發(fā)布時間：2024/10/12 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery基本操作小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.jQuery的基本操作;

　　1) innerhtml和innertext

　　　　修改:innerhtml可以放html片段，并且可以解析;

　　　　　　 innertext可以放html片段,但是不會解析;

　　　　訪問:innerhtml是訪問一串html代碼;

　　　　　　?innertext是訪問標簽中的內(nèi)容;

　　2)?val()? ? ?

　　　　封裝原生的value屬性? ? ? 主要是用於表單元素

　　3) attr()

　　　　?可以設(shè)置一個屬性，也可以設(shè)置多個屬性　

$("#city").attr("class","d1") 　　//設(shè)置一個 $("#city").attr({ 　　　　　　　　//設(shè)置多個"name" : "zhangsan","age" : "30"})
console.log($("#city").attr("class"))? ?//不傳遞參數(shù)就是訪問
$("#city").removeAttr("class")? ? //刪除指定的屬性

2.樣式操作

　　1)?attr()方法

// ? <button id="btn1">attr()方法</button>
$("#btn1").click(function(){$("#div1").attr({class : "one"})})

　　2)?追加樣式:?addClass(" ")

//<button id="btn2">追加樣式</button>$("#btn2").click(function(){$("#div1").addClass("two")})

　　3) 刪除樣式:removeClass()

//<button id="btn3">刪除樣式</button>$("#btn3").click(function(){$("#div1").removeClass() //如果不傳遞參數(shù)就是刪除所有， $("#div1").removeClass("two") //傳遞參數(shù)就是刪除某個})

　　4)?切換樣式:?toggleClass(" ")?

//<button id="btn4">切換樣式</button>$("#btn4").click(function(){//如果有這個樣式就刪除,如果沒有就增加$("#div1").toggleClass("two") })

　　5)?判斷樣式: hasClass(" ")

// <button id="btn5">判斷樣式</button>$("#btn5").click(function(){console.log($("#div1").hasClass("two")) //判斷這個樣式是否存在在這個dom上面})

　　6) css( ) 方法

　　　　取得第一個段落的color樣式屬性的值。

$("p").css("color");　　　　

　　　　將所有段落的字體顏色設(shè)為紅色并且背景為藍色。

$("p").css({ "color": "#ff0011", "background": "blue" });　　　

　　　　將所有段落字體設(shè)為紅色

$("p").css("color","red");

　　　　逐漸增加div的大小

$("div").click(function() {$(this).css({width: function(index, value) {return parseFloat(value) * 1.2;}, height: function(index, value) {return parseFloat(value) * 1.2;}});});

3.創(chuàng)建節(jié)點　

<ul><li>北京</li><li>天津</li><li>南京</li> </ul><script> // 原生的dom // 創(chuàng)建一個武漢節(jié)點,加入到ul中var $li = $("<li></li>"); $li.text("武漢");$li.attr("id","wuhan"); // 2.添加到ul中 $("ul").append($li) //內(nèi)部插入 </script>

4.遍歷節(jié)點

　　1) 所有子元素:children()

　　　　獲取第一個ul元素中所有子元素的個數(shù)

console.log($("ul:first").children().length)

　　2)?獲取第N個元素:get([index])

　　　　獲取ul元素中的第三個子元素的文本

console.log($("ul:first").children(":eq(2)").text()) console.log($("ul:first").children().get(2).innerText) console.log($("ul:first").children()[2].innerText) console.log($($("ul:first").children().get(2)).text())

　　3) 父元素:parent()

　　　　獲取上海這個元素的父元素的name屬性

console.log($($("ul:first").children().get(2)).parent().attr("name"))

　　4) 兄弟元素:prev(),next()

　　　　獲取上海這個元素的上一個兄弟元素和下一個兄弟元素

console.log($("ul:first").children(":eq(2)").prev().text()) console.log($("ul:first").children(":eq(2)").next().text())

　　5)同輩元素:siblings()

　　　　獲取上海這個元素的兄弟元素的所有個數(shù)

console.log($("ul:first").children(":eq(2)").siblings().length)　　　　

　　　　找到每個div的所有同輩元素中帶有類名為selected的元素。

<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>

$("div").siblings(".selected") // <p class="selected">Hello Again</p>

　　6)所有與指定表達式匹配的元素:find()

?　　　　獲取ul中所有的li的個數(shù)

console.log($("ul li").length) console.log($("ul").find("li").length)

5.內(nèi)部插入

　　1) append(content|fn)?

　　　　把后面的東西插入到了前面的子節(jié)點中（追加）

$("#tj").append($("#xj"))

　　2)appendTo(content)

　　　　把前面的東西插入到了后面的子節(jié)點中（追加）

$("#tj").appendTo($("#xj"))

　　3) prepend(content|fn)?

　　　　把后面的東西插入到了前面的子節(jié)點中（前面插入）

$("#tj").prepend($("#xj"))

　　4)prependTo(content)

　　　　把前面的東西插入到了后面的子節(jié)點中（前面插入）

$("#tj").prependTo($("#xj"))

6.外部插入

　　1) after(content|fn)?

　　　　把后面的插入到了前面的下一個兄弟的位置

$("#tj").after($("#xj"))

　　2) before(content|fn)?

　　　　把后面的插入到了前面的上一個兄弟的位置

$("#tj").before($("#xj"))

　　3) insertAfter(content)?

　　　　把前面的插入到了后面的下一個兄弟

$("#tj").insertAfter($("#xj"))

　　4) insertBefore(content)?

　　　　把前面的插入到了后面的上一個兄弟的位置

$("#tj").insertBefore($("#xj"))

7.刪除節(jié)點

　　empty()　謀殺式的

　　remove([expr])? ?自殺式

<body><ul id="city"><li id="bj">北京</li><li id="tj">天津</li><li id="sh">上海</li></ul><script> // var sh = document.getElementById("sh"); // console.log(sh.remove()) //這個是沒有返回值的自殺式 // var city = document.getElementById("city"); // console.log(city.removeChild(sh)) //這個是相當(dāng)于剪貼操作謀殺式 empty() //謀殺式的　　$("#sh").empty()remove([expr]) //自殺式 $("#sh").remove();</script></body>

8.替換節(jié)點

　　replaceWith(content|fn): 將所有匹配的元素替換成指定的HTML或DOM元素
　　replaceAll(selector):用匹配的元素替換掉所有 selector匹配到的元素

$("p").replaceWith($("<button>按鈕</button>")) //把p換成按鈕$("<p>這是一個段落.</p>").replaceAll($("button")) //把所有的按鈕換成p

9.復(fù)制節(jié)點

　　clone([Even[,deepEven]])

　　　　克隆匹配的DOM元素并且選中這些克隆的副本

<body><button>按鈕</button><p>這是一個段落.</p><script>$("button").click(function(){console.log("hello world")})$("button").clone(true).appendTo($("p")) //注意true的作用，表示事件是否會被克隆</script> </body>

總結(jié)

以上是生活随笔為你收集整理的jquery基本操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： BOM—浏览器对象模型（Browser
下一篇： Ajax发送请求