當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery 给类名元素添加行内样式_学Jquery的第一天

發布時間：2025/3/15 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery 给类名元素添加行内样式_学Jquery的第一天小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.創建一個div

2. Dom對象

var divDom = document.getElementById("mydiv"); console.log(divDom);

3.Jquery包裝集對象

var divJquery = $("#mydiv"); console.log(divJquery); console.log("====Dom對象與Jquery對象的互相轉換===="); var domToJquery = $(divDom); console.log(domToJquery); var jqueryToDom = divJquery[0]; console.log(jqueryToDom);

4.each() Jquery方法，遍歷方法

divJquery.each(function(index,element){console.log(index);console.log("--------");console.log(element);// dom對象console.log(this); // dom對象 });

一、選擇器

（一）、基礎選擇器

1、ID選擇器
格式：$("#id屬性值")
獲取指定id值的對象(只會獲取到第一個id的值)

1.1 id選擇器var div1 = $("#div1");console.log(div1);
2、類選擇器
格式：$(".class屬性值")
獲取所有指定class屬性值的元素

2.1 類選擇器例：var cls = $(".test");console.log(cls);
3、元素選擇器
格式：$("元素名/標簽名")
獲取所有指定標簽名的元素

3.1 元素選擇器例：var divs = $("div");console.log(divs);
4、通用選擇器
格式：$("*")
獲取所有的元素的對象

4.1 元素選擇器例：var divs = $("div");console.log(divs);
5、組合選擇器例：
格式：$("選擇器1,選擇器2...")

5.1組合選擇器例： var group = $("#div1,span,.test"); console.log(group);

（二）層次選擇器

1.后代選擇器

ancestor descendant $("#parent div")選擇id為parent的元素的所有div元素

1.1例：

var houdai = $("#parent div");
2.子代選擇器

parent > child $("#parent>div")選擇id為parent的直接div子元素

2.1例：

var zidai = $("#parent > div"); zidai.each(function(){console.log(this);}); 3.相鄰選擇器

prev + next $(".blue + img")選擇css類為blue的下一個img元素

3.1例：

var xl = $("#child + p"); xl.each(function(){console.log(this); });

4.同輩選擇器

prev ~ sibling $(".blue ~ img")選擇css類為blue的之后的img元素

4.1例：

var tb = $(".gray ~ img"); tb.each(function(){console.log(this); });

（三）、過濾選擇器

1.:checked 選擇所有被選中的元素

var checkboxs = $(":checkbox"); checkboxs.each(function(){console.log(this);console.log(this.checked); }); var ckeckeds = $(":checkbox:checked"); ckeckeds.each(function(){console.log(this); });

2.:eq(index)匹配指定下標的元素

console.log("=============="); var second = $(":checkbox:eq(1)") second.each(function(){console.log(this); });

3.:gt(index) 匹配下標大于指定值的所有元素

console.log("=============="); var gtfirst = $(":checkbox:gt(0)") gtfirst.each(function(){console.log(this); }); 4.:odd

選擇每個相隔的（奇數）元素

console.log("=============="); var odds= $(":checkbox:odd") odds.each(function(){console.log(this); });

5.:even 選擇每個相隔的（偶數）元素

console.log("=============="); var evens= $(":checkbox:even") evens.each(function(){console.log(this); });

三、jquery DOM操作

(一)、操作元素的屬性
1.獲取屬性的值

attr(屬性名稱) 獲取指定的屬性值，操作 checkbox 時選中返回 checked，沒有選中返回

undefined。 attr('checked') attr('name')

prop(屬性名稱) 獲取具有true和false兩個屬性的屬性值 prop('checked')

2.設置屬性的值

attr(屬性名稱,屬性值);

rop(屬性名稱,屬性值);

3.移除屬性

removeAttr(屬性名) 移除指定的屬性 removeAttr('checked')

如果屬性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他屬性使用attr();

<body><h3><span>html()和text()方法設置元素內容</span></h3><div id="html"></div><div id="text"></div><input type="text" name="uname" value="oop" /><div id="getHtml" >這是一個Div<span>span標簽</span><p>這是P</p></div> </body> <script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// 設置（非表單）元素的內容// 包含的html標簽$("#html").html("<h3>上海</h3>"); // $("#html").html("上海");// 不包含html標簽,只能設置純文本$("#text").text("<h3>上海</h3>"); $("#text").text("上海");// 設置表單元素的值$("input").val("Hello");// 獲取元素的值console.log($("#getHtml").html());console.log($("#getHtml").text());console.log($("input").val());</script>

(二)、操作元素的樣式

1.操作元素樣式的方法有哪些？
1）attr(“class”) 獲取class屬性的值，即樣式名稱
2）attr(“class”,”樣式名”)
修改class屬性的值，修改樣式
3）addClass(“樣式名”)
添加樣式名稱
4）css() 添加具體的樣式
removeClass(class)
移除樣式名稱

2.元素樣式例：
/* attr */
2.1設置元素的class屬性（如果屬性不存在，則添加屬性）$("#conRed").attr("class","red");
2.2如果屬性存在，則修改屬性值$("#conBlue").attr("class","green");
2.3 addClass() 添加樣式，原來的樣式保留，如果出現相同的樣式，以后面定義樣式為準$("#conRed").addClass("larger");
2.4 css()
添加一個具體樣式 css("樣式名","樣式值")$("#remove").css("color","red");
2.5同時添加多個具體的樣式名 css({"樣式名":"樣式值","樣式名":"樣式值"})$("#remove").css({"color":"red","font-family":"楷體","background-color":"gray"})；

（三）、操作元素的內容

1.操作元素內容的方法有以下幾種

html() 獲取元素的html內容
html("html,內容") 設定元素的html內容
text() 獲取元素的文本內容，不包含html
text("text 內容") 設置元素的文本內容，不包含html
val() 獲取元素value值
val(‘值’) 設定元素的value值

（四）、創建元素
$("元素內容")
添加元素
prepend(content) 在被選元素內部的開頭插入元素或內容，被追加的 content 參數，可以是字符、HTML 元素標記。
$(content).prependTo(selector) 把 content 元素或內容加入 selector 元素開頭
append(content) 在被選元素內部的結尾插入元素或內容，被追加的 content 參數，可以是字符、HTML 元素標記。
$(content).appendTo(selector) 把 content元素或內容插入selector 元素內，默認是在尾部
before()
在元素前插入指定的元素或內容:$(selector).before(content)
after()
在元素后插入指定的元素或內容:$(selector).after(content)

（五）、刪除元素

remove() 刪除所選元素或指定的子元素，包括整個標簽和內容一起刪。
empty() 清空所選元素的內容

（六）、ready事件

1.ready()加載事件
ready()類似于 onLoad()事件
ready()可以寫多個，按順序執行
$(document).ready(function(){})等價于$(function(){})
2. onload與ready()的區別：
2.1 ready()在DOM結構解析完畢后即執行
2.2 onload在DOM結構解析完畢，并且外部資源加載完畢后執行

（七）、事件

1.確定為哪些元素綁定事件
獲取元素
2.綁定什么事件（事件類型）
第一個參數：事件的類型
3.相應事件觸發的，執行的操作
第二個參數：函數

總結

以上是生活随笔為你收集整理的jquery 给类名元素添加行内样式_学Jquery的第一天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。