jQuery 基础知识(二)
前面已经介绍HTML、CSS和javaScript,这三个前端语言,俗称前端三剑客。下面来学习一个javaScript简化并封装好的库——jQuery库。
01 - jQuery选择集过滤
-
选择集过滤的介绍
选择集过滤就是在选择标签的集合里面过滤自己需要的标签
-
选择集过滤的操作
-
has(选择器名称)方法,表示选取包含指定选择器的标签
-
eq(索引)方法,表示选取指定索引的标签
has方法的示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <div id="test">测试</div> <div id="test2">开发</div> <script> $(function () { // has方法的使用 var $div = $("div").has("input"); // 设置样式 $div.css({ "background": "red" }); }); </script> <div> 这是第一个div <input type="text" id="mytext"> </div> <div> 这是第二个div <input type="text"> <input type="button"> <br /> <span id="test2">开发</span> </div> <div> <span id="test3">开发</span> </div> </body> </html>
运行结果:
eq方法的示例代码:
<script> $(function(){ // has方法的使用 var $div = $("div").has("#mytext"); // 设置样式 $div.css({"background":"red"}); // eq方法的使用 var $div = $("div").eq(1); // 设置样式 $div.css({"background":"yellow"}); }); </script> <div> 这是第一个div <input type="text" id="mytext"> </div> <div> 这是第二个div <input type="text"> <input type="button"> </div>
说明:
-
选择集过滤可以使用has方法和eq方法来完成
-
jquery给标签设置样式使用css方法
-
返回拥有一个 <span> 元素在其内的所有 <p> 元素,如上例子。
02 - jQuery选择集转移
选择集转移就是以选择的标签为参照,然后获取转移后的标签。
-
选择集转移操作
-
$('#box').prev(); 表示选择id是box元素的上一个的同级元素
-
$('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
-
$('#box').next(); 表示选择id是box元素的下一个的同级元素
-
$('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
-
$('#box').parent(); 表示选择id是box元素的父元素
-
$('#box').children(); 表示选择id是box元素的所有子元素
-
$('#box').siblings(); 表示选择id是box元素的其它同级元素
-
$('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素
选择集转移的示例代码:
<script> $(function(){ var $div = $('#div01'); $div.prev().css({'color':'red'}); $div.prevAll().css({'text-indent':50}); $div.next().css({'color':'blue'}); $div.nextAll().css({'text-indent':80}); $div.siblings().css({'text-decoration':'underline'}) $div.parent().css({'background':'gray'}); $div.children().css({'color':'red'}); $div.find('.sp02').css({'font-size':30}); }); </script> <div> <h2>这是第一个h2标签</h2> <p>这是第一个段落</p> <div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div> <h2>这是第二个h2标签</h2> <p>这是第二个段落</p> </div>
03 - jQuery读取和设置元素内容
-
html的使用方法
jquery中的html方法可以获取和设置标签的html内容:
<script> $(function(){ var $div = $("#div1"); // 获取标签的html内容 var result = $div.html(); alert(result); // 设置标签的html内容,之前的内容会清除 $div.html("<span style='color:red'>你好</span>"); // 追加html内容 $div.append("<span style='color:red'>你好</span>"); }); </script> <div id="div1"> <p>hello</p> </div>
说明:
给指定标签追加html内容使用append方法
获取和设置元素的内容使用: html方法
给指定元素追加html内容使用: append方法。
工欲善其事,必先利其器!
作者:全栈测试开发日记
出处:https://www.cnblogs.com/liudinglong/
csdn:https://blog.csdn.net/liudinglong1989/
微信公众号:全栈测试开发日记
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。