id选择器、标签选择器、类选择器、交集选择器、并集选择器
生活随笔
收集整理的這篇文章主要介紹了
id选择器、标签选择器、类选择器、交集选择器、并集选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通過id選擇器獲取元素點擊按鈕顯示效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>// 頁面加載事件$(function(){// 根據id選擇器獲取按鈕,添加點擊事件,修改按鈕的value屬性值$("#btn").click(function(){// this.value = "哈哈";// 錯誤的// this.val('哈哈');console.log($(this).val());$(this).val('嘎嘎,下雨了');});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"></body> </html>標簽選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>/*** id選擇器* $("#id屬性的值")---->某個元素* 標簽選擇器* $("標簽名字")---->多個元素或者是某個元素* */// .text()方法相當于DOM中的.innerText屬性// 對象.text()---->獲取該元素的文本內容// 對象.text('值')---->設置該元素的文本內容// 本身代碼沒有循環操作,jQuery中內部幫助我們循環操作的---->隱式迭代// 頁面加載的事件$(function(){// 根據id選擇器獲取按鈕,添加點擊事件$("#btn").click(function(){// 根據標簽選擇器獲取p標簽$("p").text('我們都是p');});}); </script> </head> <body> <input type="button" value="顯示效果" id="btn"> <p>鳴人</p> <p>佐助</p> <p>卡卡西</p> <p>自來也</p> <p>大蛇丸</p></body> </html>類選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.cls{width:200px;height: 100px;background-color: pink;}</style><script src="jquery-1.12.1.js"></script><script>// 類選擇器:$(".類樣式的名字")----某個或者是多個// .css("屬性","值");----設置某個元素的css樣式屬性值$(function(){// 根據id選擇器獲取按鈕,添加點擊事件$("#btn").click(function(){// 獲取所有應用cls類樣式的元素,改變背景顏色$(".cls").css("backgroundColor","yellow");$(".cls").css("border",'1px solid red');});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div class="cls"></div> <p class="cls">這是一個p</p> <p>山東盛產一種補藥,藥力極強</p></body> </html>交集選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><style>.cls {background-color: blue;}</style><script>$(function(){// 根據id選擇器獲取按鈕,添加點擊事件$("#btn").click(function(){// 交集選擇器----標簽+類選擇器// 先找p標簽,從p標簽中找應用了cls樣式的元素$("p.cls").css("backgroundColor","green");});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <p class="cls">小蘇喜歡助教很久了</p> <p>其實助教也喜歡小蘇</p> <ul><li>小蘇</li><li>助教</li><li>班主任</li> </ul><span class="cls">我和小蘇坐地鐵上班</span></body> </html>并集選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{width: 400px;height: 200px;background-color: green;}.cls {background-color: red;}</style><script src="jquery-1.12.1.js"></script><script>/*** 交集選擇器 標簽名.類樣式的名字* 并集選擇器 選擇器,選擇器,選擇器...*/// 頁面加載的事件$(function(){$("#btn").click(function(){// div,p,span$("#dv,p,.cls").css("backgroundColor","orange");});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"></div> <p>這是一個p</p> <span class="cls">這是一個span</span> <ul><li>小蘇喜歡吃榴蓮</li><li>助教喜歡吃臭豆腐</li><li>班主任都喜歡吃</li> </ul></body> </html>?
總結
以上是生活随笔為你收集整理的id选择器、标签选择器、类选择器、交集选择器、并集选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页加载的不同的方式、点击按钮显示一句话
- 下一篇： 设置某个元素的标签内容、设置元素的样式、