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包裝集對象

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')

<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.元素樣式例：

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值

<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>

（四）、建立元素

$("元素内容")

添加元素

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)

<script type="text/javascript">
		// 父元素
		var parent = $("#parent");
		// 要追加的内容 
		var span = $('<span class="pink">女神</span>');
		// 前追加 （追加的都是子元素）
		// prepend(content)
		 parent.prepend(span);
		// $(content).prependTo(selector)
		$(".blue").prependTo(parent);
		
		// 後追加（追加的都是子元素）
		var singer = '<span class="green">歌手</span>';
		// append(content)
		// parent.append(singer);
		// $(content).appendTo(selector)
		$(singer).appendTo(parent);
		
		
		// 插入同級元素
		// $(selector).before(content)
		$("#xxr").before("<div class='blue'><span>小奶狗</span></div>");
		// $(selector).after(content)
		$("#xxr").after("<div class='red'><span>老臘肉</span></div>");
		
		
	</script>

（五）、删除元素

remove() 删除所選元素或指定的子元素，包括整個标簽和内容一起删。

empty() 清空所選元素的内容

<script type="text/javascript">
		// remove()
		$(".green").remove();
		
		// empty()
		$(".blue").empty();
	</script>

（六）、ready事件

1.ready()加載事件

ready()類似于 onLoad()事件

ready()可以寫多個，按順序執行

$(document).ready(function(){})等價于$(function(){})

2. onload與ready()的差別：

2.1 ready()在DOM結構解析完畢後即執行

2.2 onload在DOM結構解析完畢，并且外部資源加載完畢後執行

<script type="text/javascript">
			 //js的onlooad事件
			indow.onload = function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			}
			
			// jquery的ready事件
			$(document).ready(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
			
			$(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
		</script>

（七）、事件

1.确定為哪些元素綁定事件

擷取元素

2.綁定什麼事件（事件類型）

第一個參數：事件的類型

3.相應事件觸發的，執行的操作

第二個參數：函數

<script type="text/javascript">
		/*綁定簡單事件*/
		// js綁定事件
		document.getElementById("btn").onclick = function(){
			alert('這是個按鈕。。。');
		};	
		// bind()綁定事件
		$("#btn").bind("click",function(){
			alert('這是個按鈕。。。');
		});
		
		// 直接綁定事件
		$("#btn").click(function(){
			alert('這是個按鈕。。。');
		});
	
		/*綁定多個事件*/
		// 聚焦失焦事件
		// 方式一：
		$("#txt").focus(function(){
			// 聚焦時清空文本框
			$("#txt").val("");
		}).blur(function(){
			$("#txt").val("你好");
		});
		
		// 多個事件綁定一種行為
		$("#txt").bind("focus blur",function(){
			console.log("。。。");
		});
		
		$("#txt").bind("focus",function(){
			console.log("aaa");
		}).bind("blur",function(){
			console.log("bbb");
		});
		
		$("#txt").bind({
			focus:function(){
				console.log("鍊式程式設計1");
			},
			blur:function(){
				console.log("鍊式程式設計2");
			}
		});
		
	</script>

jquery 給類名元素添加行内樣式_學Jquery的第一天

一、選擇器

繼續閱讀

jquery 當頁面圖檔加載之後_jquery筆記

jquery 當頁面圖檔加載之後_JQuery選擇器+DOM操作+事件+DOM與JQuery對象間的轉化

jquery 移動到對應元素_文章文檔标題自動生成導航jQuery小插件titleNav.js

jquery 給類名元素添加行内樣式_頁面中常用樣式及解決辦法

jquery 給類名元素添加行内樣式_Selenium元素定位不到？JS注入輕松搞定！

jquery 給類名元素添加行内樣式_element UI table元件修改單獨行/列樣式

jquery 給類名元素添加行内樣式_JAVA學習之路~JQuery-Day28

jquery 字元串查找_JQuery、Vue等考點

jquery 元素第二個_Web前端之jQuery

jquery csv轉化為數組_什麼是jQuery？什麼是Jquery？為什麼要使用Jquery？回顧javascript

jquery 判斷是否有類名_jQuery簡單小結(1)