jquery 给类名元素添加行内样式_学Jquery的第一天
1.創建一個div
<body><div id="mydiv"></div> </body> <script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">2. Dom對象
var divDom = document.getElementById("mydiv"); console.log(divDom);
3.Jquery包裝集對象
4.each() Jquery方法，遍歷方法
一、選擇器
（一）、基礎選擇器
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...")
（二）層次選擇器
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 選擇每個相隔的（偶數） 元素
三、jquery DOM操作
(一)、操作元素的屬性
1.獲取屬性的值
attr(屬性名稱) 獲取指定的屬性值，操作 checkbox 時選中返回 checked，沒有選中返回
undefined。 attr('checked') attr('name')
prop(屬性名稱) 獲取具有true和false兩個屬性的屬性值 prop('checked')
<script type="text/javascript">// 獲取元素的屬性var hef = $("a").attr("href");console.log(hef);var hef2 = $("a").prop("href");console.log(hef2);var aa1 = $("a").attr("aa");console.log(aa1);var aa2 = $("a").prop("aa");console.log(aa2);// 獲取復選框的選中狀態var ck1 = $("#ck1").attr("checked");var ck2 = $("#ck1").prop("checked");console.log(ck1);console.log(ck2);var ck3 = $("#ck2").attr("checked");var ck4 = $("#ck2").prop("checked");console.log(ck3);console.log(ck4);// 設置屬性的值$("a").attr("href","http://www.shsxt.com");$("#ck1").prop("checked",false);//$("#ck2").prop("checked",true);$("#ck2").attr("checked","checked");$("a").attr("aa","aabbcc"); //移除屬性$("a").removeAttr("href");</script>2.設置屬性的值
attr(屬性名稱,屬性值);
rop(屬性名稱,屬性值);
<style type="text/css">div{padding: 8px;width: 180px;}.blue{background: blue;}.red {background: red;}.larger{font-size: 30px;background: pink;}.green {background : green;}</style> </head> <body><h3>css()方法設置元素樣式</h3><div id="conBlue" class="blue larger">天藍色</div><div id="conRed">大紅色</div><div id="remove" class="blue larger">天藍色</div> </body> <script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/* attr */// 設置元素的class屬性（如果屬性不存在，則添加屬性）$("#conRed").attr("class","red");// 如果屬性存在，則修改屬性值$("#conBlue").attr("class","green");// addClass() 添加樣式，原來的樣式保留，如果出現相同的樣式，以后面定義樣式為準$("#conRed").addClass("larger");// css() // 添加一個具體樣式 css("樣式名","樣式值")$("#remove").css("color","red");// 同時添加多個具體的樣式名 css({"樣式名":"樣式值","樣式名":"樣式值"})$("#remove").css({"color":"red","font-family":"楷體","background-color":"gray"})</script>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的第一天的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在阳光下奔跑……
- 下一篇： DataGrid中添加背景