设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器
2019-01-15 15:59
471 查看
点击按钮设置某个元素的标签内容
[code]<!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>
设置元素的样式
[code]<!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>
层次选择器
[code]<!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>
总结选择器
[code]<!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>
相关文章推荐
- 工作总结 @Html 辅助方法 为 生成的 标签设置元素属性 htmlAttributes 一个对象,其中包含要为该元素设置的 HTML 特性。
- CSS中如何把Span标签等行内元素设置为固定宽度及div中内容垂直居中
- CSS选择器[伪类选择器/伪元素 /属性选择器/子选择器/兄弟选择器/否定伪类/样式的继承/选择器的优先级/a的伪类/文本标签/em 和 i 的区别?]
- css基础 设置div标签 宽度 边框线颜色样式 div中文本居中 div块在网页中居中 div中内容距边框线的距离
- css基础 设置div标签 宽度 边框线颜色样式 div中文本居中 div块在网页中居中 div中内容距边框线的距离
- JQuery元素属性和样式操作、以及设置元素和内容
- 给元素标签设置样式方法
- 关于nth-child()伪类选择器选取元素设置transform样式但是无法通过hover改变transform的问题
- 为Html的textarea元素内容设置样式
- 909422229_Jquery获取元素标签内容与设置
- 单选框radio总结(获取值、设置默认选中值、样式)
- 给所有浏览器的元素设置了一个共同的样式:Normalize.css
- jQuery使用之设置元素样式用法实例
- jquery之设置元素内容(替换HTML或文本内容,使用html()和text()方法)
- 动态事创建的a标签上利用jq滑过元素执行事件通过ajax获取后台数据根据鼠标位置展示数据内容,鼠标离开消失
- JFreeChart笔记 (五) 时间序列图:设置轴线标签显示样式
- AngularJS 设置元素样式
- Android样式设置总结
- jQuery选择器总结 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
- jquery的DOM节点获取,节点内容获取和设置,样式写入