设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器
生活随笔
收集整理的這篇文章主要介紹了
设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
點擊按鈕設置某個元素的標簽內容
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background: green;}</style><script src="jquery-1.12.1.js"></script><script>// 案例:點擊按鈕在div中添加一個p標簽/*** .val();----設置或者獲取標簽標簽的value屬性值* .text();----設置或者是獲取標簽中的文本內容----就相當于DOM中的innerText* .css();----設置元素的css樣式屬性值* .html();----設置或者是獲取標簽中的html內容----就相當于DOM中的innerHTML*/$(function(){// 點擊按鈕$("#btn").click(function(){$("#dv").html("<p>這是一個p標簽</p>");});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"></div></body> </html>設置元素的樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>// 點擊按鈕,設置div的寬,高,背景顏色,邊框$(function(){$("#btn").click(function(){$("#dv").css("width","200px");$("#dv").css("height","200px");$("#dv").css("backgroundColor","red");$("#dv").css("border","1px solid green");});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"></div></body> </html>層次選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 500px;height: 400px;border: 2px solid green;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 點擊按鈕,設置div中span的樣式// 層次選擇器----后代選擇器(直接子元素,孫子元素)$("#btn").click(function(){ // 獲取的是div這個父級元素中所有span標簽// $("#dv span").css("backgroundColor","red");// 獲取的是div這個父級元素中直接的子元素// $("#dv>span").css("backgroundColor","red");// 獲取的是div這個父級元素后面的所有的兄弟元素----span// $("#dv~span").css("backgroundColor","red");// 獲取的是div后面直接的兄弟元素// $("#dv+span").css("backgroundColor","red");});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <span>這是div前面的兄弟元素span</span> <div id="dv"><span>這是第一個span標簽</span><ul><li>第一個li</li><li>第二個li<span>第二個li中的span</span></li><li>第三個li</li></ul><span>這是第二個span標簽</span><span>這是第三個span標簽</span> </div> <!-- <p>這是p</p> --> <span>這是div后面的兄弟元素span</span> <span>這是div后面的兄弟元素span</span> <span>這是div后面的兄弟元素span</span> <span>這是div后面的兄弟元素span</span></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屬性值")// 標簽選擇器// $("#標簽名字")// 類選擇器// $(".類樣式的名字")// 交集選擇器----標簽+類選擇器// $("標簽名.類樣式名字")// 并集選擇器----多條件選擇器// $("標簽名字,類樣式名字,#id選擇器")// 層次選擇器// $("選擇器 選擇器");====>$("#dv span")// $("選擇器>選擇器");====>$("#dv span")// $("選擇器~選擇器");====>$("#dv span")// $("選擇器+選擇器");====>$("#dv span")</script> </head> <body></body> </html>?
總結
以上是生活随笔為你收集整理的设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： id选择器、标签选择器、类选择器、交集选
- 下一篇： 列表隔行变色、显示和隐藏下拉菜单、列表的