1.什么jQuery选择器
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
2.在页面中引入jQuery
获取jQuery
使用jQuery弹出提示框
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
3.jQuery语法规则
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
语法：$（selector）.action()
4.jQuery操作页面元素
使用addClass( )方法为元素添加样式
使用css( )方法设置元素样式
使用show( )、hide( ) 方法设置元素的显示和隐藏
5.jQuery应用方法：addClass()、css()方法、show() 、hide()、 next()
1）使用jQuery弹出提示框
<script> $(document).ready(function() { //为页面加载事件绑定方法 alert("我的第一个jQuery示例！"); }); </script>
2）addClass()方法：为元素添加样式
语法：jQuery 对象.addClass([样式名])；
示例：
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
学院操作——隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> <style> .even{background: #0099cc} .odd{background: #cccccc} </style> </head> <body> <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td>张飞</td><td>男</td><td>黄土高坡</td></tr> <tr><td>马云</td><td>男</td><td>杭州</td></tr> <tr><td>黄铮</td><td>男</td><td>北京海淀</td></tr> <tr><td>马化腾</td><td>男</td><td>深圳</td></tr> </tbody> </table> <script src="../BAO/jquery-3.5.1.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function () { $("tr:odd").addClass("odd");//奇数行添加样式 $("tr:even").addClass("even");//偶数行添加样式 }) </script> </body> </html>
3）css( )方法设置元素样式
语法：
css("属性","属性值")；
css({"属性1":"属性值1","属性2":"属性值2"...})；
示例
$(this).css({"background":"#c81623"});
4）show() 和hide()设置元素的显示和隐藏
语法：
$(selector).show( );
$(selector).hide( );
示例：
$(this).children("div").show();
$(this).children("div").hide();
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>问答特效</title> <style type="text/css"> h2{padding: 5px;} p{display: none;} </style> </head> <body> <h2>问世间情为何物？</h2> <p> <strong>子曰：</strong> 废物 </p> <script src="js/jquery-3.5.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("h2").click(function(){ $("h2").css("background-color","#CCFFFF").next().css("display","block"); }); }); </script> </body> </html>
6.jQuery代码风格
“$”等同于“jQuery
链式操作：对一个对象进行多重操作，并将操作结果返回给该对象
示例：$("h2").css("background-color","#ccffff").next().css("display","block")
隐式迭代
示例：
$(document).ready(function() {
$("li").css({"font-weight":"bold","color":"red"
});
});
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>隐式迭代</title> <style type="text/css"> li {line-height:22px;} </style> </head> <body> <ul> <li>数码产品</li> <li>家用电器</li> <li>妇幼保健</li> <li>时尚丽人</li> </ul> <script src="js/jquery-3.5.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("li").css({"font-weight":"bold","color":"red"}); }); </script> </body> </html>
7.DOM对象和jQuery对象的区别：
1.jQuery对象和DOM对象
DOM对象，即是我们用传统的方法(javascript)获得的对象，jQuery对象即是用jQuery类库的选择器获得的对象;
jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法，例:
$("#foo").html(); //获取id为foo的元素内的html代码，html()是jQuery特有的方法;
2.jQuery对象和DOM对象的互相转换
jquery对象转换成 dom对象
jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)。
附：平时用到的jquery对象都是通过$()函数制造出来的，$()函数就是一个jquery对象的制造工厂.
建议:如果获取的对象是 jquery对象，那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,例如:
var $variable = jquery对象;
如果获取的是dom对象，则定义如下:
var variable = dom对象
8. jQuery选择器
1.基本选择器：
$("h1").css("color", "blue"); //标签选择器
$(".price").css({"background":"#efefef","padding":"5px"}); //类选择器
$("#author").css("clor", " #083499"); //id选择器
$(".intro,dt,dd").css("color", " #ff0000"); //并集选择器
$("*").css("font-weight", "bold"); //全局选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”); | 获取指定ID的元素 |
| 类选择器 | $(“.class”); | 获取同一类class的元素 |
| 标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
$("dt").click(function(){ //获取<dt>标签并为其添加click事件函数
$("dd").css("display","block"); //获取<dd>标签设置显示
});
/* 获取并设置所有class为price的元素背景颜色和内边距 */
$(".price").css({"background":"#efefef","padding":"5px"});
/* 获取并设置id为author的元素字体颜色 */
$("#author").css("color","#083499");
/* 获取并设置所有<dt>、<dd>、class为intro的元素字体颜色 */
$(".intro,dt,dd").css("color","#ff0000");
$("*").css("font-weight","bold");//设置所有元素的字体加粗显示
})
2.层次选择器
$(".textRight p").css("color","red"); //后代选择器
$(".textRight>p").css("color", "red"); //子选择器
$("h1+p").css("text-decoration", "underline"); //相邻元素选择器
$("h1~p").css("text-decoration", "underline"); //同辈元素选择器
3.属性选择器
示例
$("#news a[class]").css("background","#c9cbcb");//a标签带有class属性
$("#news a[class='hot']").css("background", "#c9cbcb"); // class为hot
$("#news a[class!='hot']").css("background", "#c9cbcb");// class不为hot
$("#news a[href^='www']").css("background","#c9cbcb");//以www开头
$("#news a[href$='html']").css("background", "#c9cbcb");//以html结尾
$("#news a[href*='k2']").css("background","#c9cbcb"); //包含"k2"的元素
4.基本过滤选择器
|
语法 |
描述 |
示例 |
|
:eq(index) |
选取索引等于index的元素（index从0开始） |
$("li:eq(1)" )选取索引等于1的<li>元素 |
|
:gt(index) |
选取索引大于index的元素（index从0开始） |
$("li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1） |
|
:lt(index) |
选取索引小于index的元素（index从0开始） |
$("li:lt(1) " )选取索引小于1的<li>元素（注：小于1，不包括1） |
|
:header |
选取所有标题元素，如h1~h6 |
$(":header" )选取网页中所有标题元素 |
|
:focus |
选取当前获取焦点的元素 |
$(":focus" )选取当前获取焦点的元素 |
|
:animated |
选择所有动画 |
$(":animated" )选取当前所有动画元素 |
示例
$(document).ready(function(){
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
//li 最后一个 没有边框
$(".contain li:last").css("border","none");
//改变第一个li的字体大小和颜色
// $(".contain li:first").css({"font-size":"16px","color":"#e90202"});
//设置偶数行背景颜色
// $(".contain li:even").css("background","#f0f0f0");
//设置奇数行背景颜色
//$(".contain li:odd").css("background","#cccccc");
//设置前两个li的字体颜色（从0开始,小于2）
$(".contain li:lt(2)").css({"color":"#708b02"});
//设置后两个li的字体颜色（从0开始，大于3）
$(".contain li:gt(3)").css({"color":"#b66302"});
//改变第3个li的背景颜色（从0开始
//$(".contain li:eq(2)").css({"background":"#02acaa"});
});
5.可见性过滤选择器（通过元素显示状态来选取元素）
|
语法 |
描述 |
示例 |
|
:visible |
选取所有可见的元素 |
$(":visible")选取所有可见的元素 |
|
:hidden |
选取所有隐藏的元素 |
$(":hidden") 选取所有隐藏的元素 |
$("p:hidden").show();
$("p:visible").hide();
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>可见性过滤选择器</title> <style type="text/css"> #txt_show {display:none; color:#00C;} #txt_hide {display:block; color:#F30;} </style> </head> <body> <p id="txt_hide">点击按钮，我会被隐藏哦~</p> <p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p> <input name="show" type="button" value="显示隐藏的P元素" id="show"/> <input name="hide" type="button" value="隐藏显示的P元素" id="hide" /> <script src="js/jquery-1.12.4.js"></script> <script> $(document).ready(function(){ $("#show").click(function(){ $("p:hidden").show(); }) $("#hide").click(function(){ $("p:visible").hide(); }) }) </script> </body> </html>
posted on
