建站
咨詢
售后
建站咨詢
新聞中心
jQuery的操作方式有哪些？
一、選取DOM元素
創(chuàng)新互聯公司是一家專注于成都網站設計、成都做網站與策劃設計,恩陽網站建設哪家好?創(chuàng)新互聯公司做網站,專注于網站建設十多年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:恩陽等地區(qū)。恩陽做網站價格咨詢:13518219792
jQuery的核心是通過各種選擇器，選中DOM元素，可以用querySelectorAll方法模擬這個功能。
var $ = document.querySelectorAll.bind(document);
這里需要注意的是，querySelectorAll方法返回的是NodeList對象，它很像數組（有數字索引和length屬性），但不是數組，不能使用pop、push等數組特有方法。
二、DOM操作
DOM本身就具有很豐富的操作方法，可以取代jQuery提供的操作方法。
尾部追加DOM元素。
// jQuery寫法
$(parent).append($(child));
// DOM寫法
parent.appendChild(child)
頭部插入DOM元素。
// jQuery寫法
$(parent).prepend($(child));
// DOM寫法
parent.insertBefore(child, parent.childNodes[0])
刪除DOM元素。
// jQuery寫法
$(child).remove()
// DOM寫法
child.parentNode.removeChild(child)
jquery中有哪些基礎事件方法
jquery基礎事件，包括綁定事件、簡寫事件、復合事件；
一．綁定事件
jQuery 通過.bind()方法來為元素綁定這些事件。
形式：
bind(type, [data], fn)
參數：
type 表示一個或多個類型的事件名字符串；
[data]是可選的，作為 event.data 屬性值傳遞一個額外的數據，這個數據是一個字符串、一個數字、一個數組或一個對象；
fn 表示綁定到指定元素的處理函數。
二、簡寫事件
為了使開發(fā)者更加方便的綁定事件，jQuery 封裝了常用的事件以便節(jié)約更多的代碼。 稱之為簡寫事件。簡寫事件，綁定方法如下圖，
三、復合事件
jQuery 提供了許多最常用的事件效果， 組合一些功能實現了一些復合事件， 比如切換功?能、智能加載等。
擴展資料
1、綁定事件fn函數
1)使用點擊事件
$('input').bind('click', function () {//點擊按鈕后執(zhí)行匿名函數
alert('點擊！');
});
2)普通處理函數
$('input').bind('click', fn); //執(zhí)行普通函數式無須圓括號
function fn() {
alert('點擊！');
}
2、簡寫事件函數
1）.mouseover()和.mouseout()表示鼠標移入和移出的時候觸發(fā)。而.mouseenter()和.mouseleave()表示鼠標穿過和穿出的時候觸發(fā)。
2）.keydown()、.keyup()返回的是鍵碼，而.keypress()返回的是字符編碼。
3）.focus()和.blur()分別表示光標激活和丟失，事件觸發(fā)時機是當前元素。而.focusin()和.focusout()也表示光標激活和丟失，但事件觸發(fā)時機可以是子元素。
3、復合事件示例，背景移入移出切換效果
$('div').hover(function () {
$(this).css('background', 'black');? ? ?//mouseenter 效果
}, function () {
$(this).css('background', 'red');? ? ? //mouseleave 效果，可省略
});
參考資料
jQuery官方網站-事件
在jQuery中,通過方法什么獲取元素標簽內容？
jquery有text()、html()、val()這三種獲得標簽內容的方法；
補充：
根據ID獲取：$("#idName").text()，
根據標簽名獲?。?("p").text()，
根據類名獲?。?(“.class1”).text()
jQuery常用屬性和方法有哪些
屬性：
獲得標簽：$("#id")
獲得標簽內的代碼：.html()
獲得標簽內的文本：.text()
修改標簽內的代碼：.html("內容");
修改標簽內的文本：.html("內容");
獲得標簽屬性：.attr("屬性");
修改標簽屬性：attr("屬性","屬性值");
添加樣式：addClass("樣式名");
動態(tài)切換樣式：toggleClass("樣式名");
獲取樣式：css
添加元素：append("元素");
移去元素：.remove();
清空節(jié)點： .empty();
獲取第二個li節(jié)點： var $li=$("ul li:eq(1)");
獲取第二個li節(jié)點的文本內容： var li_txt=$
方法：
一：插入節(jié)點：
append() 向每個匹配的元素文本內部的后面追加內容
eg：p我想說：/p
代碼：
$("p").append("b你好/b");
結果為：p我想說：b你好/b/p
appendto() 將所有的匹配的元素追加到指定的元素中。實際上，使用該方法是顛倒了常規(guī)的$(A).append(B)的操作，即不是B追加到A中，而是將A追加到B文本的后面中。
eg：p我想說：/p
代碼：
$("b你好/b").appendTo("p");
結果為：p我想說：b你好/b/p
prepend() 向每個匹配的元素文本的內部前置內容。
eg：p我想說：/p
代碼：
$("p").prepend("b你好/b");
結果為：pb你好/b我想說：/p
prependto() 將所有的匹配的元素前置到指定的元素中。實際上，使用該方法是顛倒了常規(guī)的$(A).append(B)的操作，即不是B前置到A中，而是將A前置到B中
eg：p我想說：/p
代碼：
$("b你好/b").prependto("p");
結果為：pb你好/b我想說：/p
after() 向每個匹配的元素之后插入內容 。
eg：p我想說：/p
代碼：
$("p").after("b你好/b");
結果為：p我想說：b你好/b/p
insertAfter 將所有的匹配的元素插入到指定的元素后面。實際上，使用該方法是顛倒了常規(guī)的$(A).append(B)的操作，即不是B插入到A后面，而是將A插入到B后面。
eg：p我想說：/p
代碼：
$("b你好/b").after("p");
結果為：p我想說：b你好/b/p
before() 在每個匹配的元素之前插入內容
eg：p我想說：/p
代碼：
$("b你好/b").after("p");
結果為：p我想說：b你好/b/p
insertBefore():將A標簽插入到B標簽的前面
二：刪除：
①remove 該節(jié)點所包含的所有的后代節(jié)點將同時被刪除 也可以通過參數來選擇
②empty 清空節(jié)點，它能清空元素中的所有后代節(jié)點
三：替換節(jié)點：
①replaceWith() 作用是將所有匹配的元素都替換成指定的HTML或DOM元素
②replaceAll()
四：包裹節(jié)點:
①warp() 作用是是將所有元素進行單獨包裹
②warpAll() 作用元素的是所有匹配的元素用一個元素來包裹
③warpinner() 作用是將每一個的子內容（包括文本節(jié)點）用其他結構化的標記包裹起來
五：設置和獲取HTML、文本值
1、html()：
2、text
3、val
六：遍歷節(jié)點
1、children（）： 取得匹配元素的子元素
2、next（）：取得匹配元素后面緊鄰的同輩元素
3、prev（）：取得匹配元素前面緊鄰的同輩元素
4、siblings（）：取得匹配元素前后所有的同輩元素
5、closest（）：取得最近的匹配元素
七：css-dom
css 獲取樣式的屬性
offset（）
position
scroll
scrollLeft
樣式操作：
1：獲取樣式和設置樣式 attr
eg：p class="myClass" title="選擇你最喜歡的水果"你最喜歡的水果是？/p
獲取樣式： var p_class=$("p").attr("class");
設置樣式：$("p").attr("class","high");
2：追加樣式 addClass
style
.high{
font-weight:bold?? 粗體字
color:red????????? 字體顏色
}
.another{
font-weight:italic?? 斜體字
color:blue?????????? 字體顏色
}
/style
追加樣式：
$("input:eq(2)").click(function(){$("p".addClass("another"))})
☆在css中有以下規(guī)定：
①如果給一個元素添加了多個class值，那么就相當于合并了他們的樣式
②如果不同的class設置了同一樣式，則后者覆蓋前者
addClass????????????????????????????????????? attr
對同一個網頁元素進行操作???????? ptest/p???????????????????????????????? ptest/p
第一次使用??????????????????????? $"p".addClass("high");?????????????????? $"p".attr("class","high");
第一次結果??????????????????????? p class="high"test/p??????????????????? p class="high"test/p???
再次使用????????????????????????? $"p".addClass("another");???????????????? $"p".attr("class","another");
最終結果????????????????????????? p class="high another"test/p???????????? p class="another"test/p
3：移除樣式 removeClass
p class="high another"test/p?
移除一個：$"p".removeClass("high");
移除二個：$"p".removeClass("high").removeClass("another");==$"p".removeClass("high another")
移除全部：$"p".removeClass();
4：切換樣式 toggle
5：判斷是否含有摸個樣式 hasClass
可以用來判斷元素中是否含有某個class，如果有返回true否則返回false
jQuery的使用方法
使用步驟如下：
1.jQuery給放到一個文件夾里面,方便我們待會引用這個jQuery,這里我就放到我項目的js文件夾里面。
2.然后我們來開始編輯HTML界面代碼。
3.使用script標簽把jQuery引入到我們的HTML界面。src引號里面的就是我們的jQuery路徑名稱。
4.接著再書寫一個script標簽對,里面寫上jQuery入口函數,這樣,當我們的HTML加載完成之后就會執(zhí)行我們的jQuery代碼
標題名稱：jquery中的方法,jquery對象方法
分享鏈接：http://fisionsoft.com.cn/article/hocdeh.html
