jQuery—頁面內容,樣式,控制屬性
版權宣告:本文為博主原創文章,轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/71249335
設定元素及內容
- html() 獲取元素中的HTML內容(相當於innerHTML)
- text() 獲取文字內容(自動清理HTML標籤)
- html(value) 設定innerHTML的內容
- text(value) 替換文字內容(覆蓋innerHTML中所有的文字和標籤)
- val() 獲取value屬性,加屬性表示設定value的值
- val([value,value]) 控制選中的元件
text() 會過濾掉標籤中的HTML標籤,text對於以下段落的處理結果是:
<div id="a">
<p>這是一個段落</p>
<p>這是第二個段落</p>
<p>這是第三個段落</p>
</div>
這是一個段落 這是第二個段落 這是第三個段落
當val([“value”,”value2”,…]) 引數為陣列時,與value對應的表單元件會被選中
表單:
<input type="checkbox" name="name" value="man">
<input type="checkbox" name="name" value="women">
操作:
$("input").val(["man","women"]); // 兩個核取方塊都會被選中
PS: 當html() 和 text() 的引數帶有HTML標籤時,HTML會原封不動的輸出HTML標籤,而text()會將HTML標籤轉義後再輸出,所以text()輸出的是純文字,即使文字中有HTML標籤也會按照純文字輸出。
元素的屬性操作
- attr(“屬性名”)
- attr(“屬性名”,”屬性值”) 設定屬性值
- attr({key:value,key:value}) 設定多個屬性
- attr(“屬性值”,function(index,value){})value表示原來的value(如果沒有value則為undefined)
- removeAttr(“屬性名”) 刪除屬性
同時設定多個屬性
$("#input").attr({
class:`a`,
size:10
});
通過匿名函式設定屬性值
$("#input").attr(`value`,function(index,value){
return index + value;
});
以上方法都可使用匿名函式
CSS
- css(“”) 獲取css樣式
- css(“屬性名”,”屬性值”) 設定css樣式
- css([“屬性名”,”屬性名”,…]) 返回包含所有屬性的物件(原生js物件)
- css(“屬性名”,function(index,value){})
var data = $("#a").css([`width`,`height`,`background-color`]);
for(var i in data ){
alert(data[i]);
}
設定多個樣式:
css({
"屬性名":"屬性值",
"屬性名":"屬性值",
})
$("#a").css({
"width":"200px",
"height":"200px",
"background-color":"green"
});
each() 遍歷物件成員屬性
對於原生的js物件:
$.each(物件,function(樣式屬性名,屬性值){})
$.each(data,function(a,b){
alert(a+":"+b);
});
對於jQuery物件:
$(“div”).each(function(index,element){}) element是DOM物件
$("div").each(function(index,element){
alert(index+element.innerHTML)
});
toggleClass()
- toggleClass(className) 預設樣式和指定樣式之間的切換
- toggleClass(className,switch) 移除和新增指定的樣式
- toggleClass([switch]) 移除和新增已有的所有樣式
- toggleClass(function(){}) 匿名函式
- toggleClass(function(index,className,switchBool){}) 匿名函式(形參名不能是關鍵字,否則會報錯)
- addClass(“class1 class2 class3”);增加class
-
removeClass(“class1 class2”);
-
true: 切換為指定樣式
- false: 切換為預設樣式
在指定樣式與預設樣式之間切換
document.getElementById("a").onclick = function(){
$("#a").toggleClass("red");
};
下面的程式碼與上面的程式碼作用相同,用count計數切換的
var count=0;
$("#a").click(function(){
$("#a").toggleClass("red",count++%2==0);
});
實現在兩個樣式之間切換
var count = 0 ;
$("#a").click(function(){
$(this).toggleClass("red" , count++ %2 == 0 );
if($(this).hasClass(`red`)){
$(this).removeClass(`green`);
}else{
$(this).toggleClass(`green`);
}
});
使用不帶引數的匿名函式
$("div").click(function(){
$(this).toggleClass(function(){
if($(this).index() % 2 == 0 ){
return "green";
} else {
return "red";
}
})
});
使用帶引數的匿名函式
$(document).click(function(){
$("div").toggleClass(function(index,className,switchBool){
if(index % 2 == 0 ){
return "green";
} else {
return "red";
}
})
});
PS:removeClass()中沒有帶任何引數,表示的是把指定元素中的所有類名移除
相關文章
- HTML API + CSS 控制頁面列印內容和樣式HTMLAPICSS
- jQuery - 設定內容和屬性jQuery
- jQuery - 獲取內容和屬性jQuery
- css控制列印內容的樣式CSS
- 如何為要被列印的內容設定CSS樣式屬性CSS
- js設定頁面TR 的屬性 背景顏色 樣式JS
- jQuery捕獲-獲取DOM元素內容和屬性jQuery
- robotframework 使用jQuery處理頁面display隱藏內容FrameworkjQuery
- 怎麼建立屬於自己的網址,教你怎樣建網頁,裝修頁面內容網頁
- Xamarin XAML語言教程基本頁面ContentPage佔用面積內容頁面的派生關係與屬性
- CSS頁面控制方式及其優先順序-- 行內樣式、內嵌式、連結式、匯入式CSS
- jquery如何設定帶有important的樣式屬性jQueryImport
- 010-jQuery獲取和設定內容屬性jQuery
- 網站頁面內的內容結構怎樣佈局才合理?網站
- Shell指令碼的顏色樣式及屬性控制指令碼
- JQuery屬性與樣式——樣式操作.css()和元素資料的儲存.data()jQueryCSS
- jquery js 設定 div 的內容,給 div 新增一個屬性jQueryJS
- CSS內聯樣式的使用,設定字型屬性CSS
- css字型樣式屬性CSS
- jQuery知識總結之元素屬性與樣式的操作jQuery
- jQuery屬性操作之.val()函式jQuery函式
- (中級)快捷樣式屬性
- uni-app 頁面樣式APP
- 頁面佈局的相關內容
- jQuery 屬性jQuery
- jQuery屬性jQuery
- 利用load()函式在指定div載入引用頁面內容函式
- Android 樣式屬性的使用Android
- CSS常見樣式和屬性CSS
- PHP模擬登陸抓取頁面內容PHP
- java抓取有驗證的頁面內容Java
- css頁面樣式初始化CSS
- 登陸頁面樣式佈局
- PbootCMS前端頁面樣式丟失boot前端
- js實現父頁面獲取iframe子頁面內容程式碼JS
- 使用 jQuery 選擇器獲取頁面元素,然後利用 jQuery 物件的 css() 方法設定其 display 樣式屬性,從而實現顯示和隱藏效果。jQuery物件CSS
- jQuery length屬性jQuery
- 為何頁面內容和網頁邊緣有空隙網頁