三、（1）jQuery入门及选择器

jQuery入门及选择器

jQuery简介（了解）

什么是jQuery

　　jQuery是一个开源的产品，任何人都可以自由的使用，jQuery强调的理念是写的少，做的多(write less, do more)，其独特的选择器、链式DOM操作方式、事件绑定机制、出色的浏览器兼容性、封装完善的Ajax都是其它JavaScript库望尘莫及的，是继prototype之后又一个优秀的Javascript框架 (框架指已经封装好的，据有一定结构和功能的代码)。

扩展知识：库，包：封装了很多预定义的对象和实用的函数。

JavaScript框架

1) Prototype：侧重功能扩展,被jQuery干掉了。
2) Yui：Yahoo user interface （yahoo 用户接口）实现页面布局，提供了很多组件。
3) Dojo：功能多，企业级，得到了IBM、SUN和BEA等一些大公司的支持。学习曲线陡，文档不齐全，API不稳定，每次升级都可能导致已有的程序失效。
4) ExtJs：2007年出来的高级、有许多绚丽效果的框架（例如：多个div可以拖拽实现位置切换）臃肿庞大，性能一般，兼容性不及jQuery。
5) MooTools (面向对象)
6) jQuery 。（写得更少，做得更多，兼容性好）。

为什么要学习和使用jQuery

　　在实际项目中，我们很多时候需要处理后端返回来的数据，把数据渲染在页面。返回的数据可能每次的数据条数都不一样，每条数据的字段个数也可能不一样，我们展示数据的时候，就需要根据数据实际情况动态的在页面上增加，删除，修改我们的html节点或者css样式，为了增强用户体验，有时候还需要做动画效果，课件js操作文档的的时候非常多。原生的js操作文档会有很多兼容性问题需要我们去处理，使用jQuery可以避免这些问题。

JQuery的特点:

 1、开源产品、语义易懂、丰富文档。（备注：学习jQuery的主要方法就是查看文档）
 2、write less, do more。
 3、jQuery 是一个轻量级的脚本，其代码非常小巧。开发版278K，压缩版94K。
 4、jQuery 支持 CSS1~CSS3 定义的属性和选择器
 5、jQuery 是跨浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+、Chrome。兼容性好。
 6、插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能。

　　JQuery的宗旨: write less，do more(写更少的代码，实现更多的功能)。

jQuery被用在哪里

处理html 文档动态的增加、删除html元素
Events 各种鼠标、键盘、浏览器事件
实现动画效果展开和折叠、隐藏和显示、淡入和淡出等。
提供AJAX交互异步加载，局部刷新等，ajax后面有门课程单独讲解。

扩展知识： JQuery可以用到任何的网站中.移动端现在一般用zepto.js 这个库跟jquery写法非常相似，所以学好了jquery,也相当于学会了zepto.js。

jQuery版本划分

　　1.x系列　　支持ie6~8，兼容性比较好
　　2.x系列　　不支持IE6~8，体积小
　　3.x系列　　仅支持ie9以上的浏览器，目标是更加快速。

实际运用：

　　1.学校，医院，政府-->使用1.x版本

　　2.其他只关注炫酷效果的网站，可以使用2.x或3.x版本

jQuery入门体验

1、黑白交替效果:

<body>
    <input type="button" value="开灯" id="on"/>
    <input type="button" value="关灯" id="off"/>
    <script>
        //黑白交替效果
        $(function () {
            $("#on").click(function () {
               $("body").css("background","white");
            });
            $("#off").click(function () {
                $("body").css("background","black");
            });
        });</script>
</body>

2、div盒子 5秒内宽度变为1000px （注意：属性和值之间是冒号 : 而不是逗号, 多个值之间才是，）

<body>
    <div id="box">
        占位符占位符占位符占位符占位符占位符占位符占位符占位符
        占位符占位符占位符占位符
    </div>//2、div盒子 5秒内宽度变为1000px（注意：属性和值之间是冒号 : 而不是逗号,  多个值之间才是。
        $(function () {
            $("#box").animate({"width":"100%"},10000);
        });
    </script>
</body>

jQuery中的 $ 符号

　　在jQuery中，$是jQuery的别名,可以把$看着jQuery的快捷方式，所有使用$的地方也都可以使用jQuery来替换，如$('#msg')等同于jQuery('#msg') 的写法。$ 符号具体用在以下几个地方：

 1、$(“字符串”) 获取页面中元素。例如：$(“#box1”), $(“.box1”)等。
 2、$.ajax() 将$作为函数对象,使用该对象上面的方法。
 3、$(function(){}) 注册页面加载完毕事件。等效于window.onload
 4、$(domObject); dom对象转为jquery对象。举例：$(window)
 5、$(“html代码”) 创建html代码的元素对象。

使用JQuery的大前提

　　1、使用jQuery之前必须先引入jQuery的js文件,你的代码要写在引入jQuery之后.

　　2、查找元素要保证你的元素的确是存在的。

　　3、查找元素要保证你的获取的代码是在元素已加载后执行。

　　注意：很多初学者，发现通过jQuery的方法无法获取元素。其实最普遍的问题是因为元素为未加载。

解决办法：

　　1.获取代码写在body元素内容的最后。

　　2.通过jQuery 页面加载事件。

$(function(){
    //页面加载完毕,获取页面元素。
    alert("hello jQuery") ;
});
//下面两个个方法跟上面这个方法是同一个意思
$(document).ready(function(){
    //页面加载完毕,获取页面元素。
    alert("hello jquery") ;
});
jQuery(function(){
    //页面加载完毕,获取页面元素。
    alert("hello jquery") ;
});

选择器

什么是选择器

　　概念：根据标签的属性id,class的值或者是标签的名字查找文档元素的功能称之为选择器。

　　选择器是jquery的根基，在jquery中，对事件的处理，遍历DOM,ajax操作等都依赖于选择器，熟练使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。

　　jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。

为什么要使用选择器

　　通过Javascript改变html中元素效果之前首先要找到元素,采用jQuery选择器寻找元素简单快捷。

　　原生javascript代码:document.getElementById(‘myId’);
　　jQuery代码:$(‘#myId’)

例如：改变页面中所有的p标签的背景颜色为红色.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入jQuery库-->
    <script src="js/jquery.js"></script>
</head>
<body>
    <p>自在飞花轻似梦</p>
    <p>自在飞花轻似梦</p>
    <p>无边丝雨细如愁</p>
    <p>无边丝雨细如愁</p>
    <script>
      //3. 改变页面中所有的p标签的背景颜色为红色.
        //方法一：原生js
        var ps = document.getElementsByTagName("p");
        for (var i=0;i<ps.length;i++){
            ps[i].style.background="#f00";
        }

        //方法二：jQuery
        $("p").css("background","#f00");
    </script>
</body>
</html>

选择器分类

选择器的设计思想源于CSS，jQuery的选择器借鉴了CSS选择符号的语法规范.

不同的选择符号作用于不同的html元素.

jQuery借鉴了css选择器的用法。以下截图是jQuery全部的选择器：

1. 基本选择器（重点）

　　根据标签名字,css类名或者id的名字查找符合条件的元素。
语法:

　　1. #id　　　　　　　　　　　　　　　id选择器

　　2. Element　　　　　　　　　　　　元素选择器

　　3. .class　　　　　　　　　　　　　 class选择器

　　4. *　　　　　　　　　　　　　　　通配符选择器

　　5. selector1, selector2, selectorN　　联合选择器,多个选择器使用,隔开

练习：给页面所有的p标签加上背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="title">
    <h1 id="t1">标题一</h1>
    <h2>标题一</h2>
    <p>占位符占位符</p>
</div>
<div class="box"><p>占位符占位符</p></div>
<script>
    //标签选择器
    $("p").css("background","#f00");

    //类选择器
    $(".box").css("background","#f0f");

    //id选择器
    $("#t1").css("background","#00f");

    //组合选择器
    $("p,#t1").css("fontSize","50px");
</script>
</body>
</html>

2. 层级选择器

　　以一个元素为参照,查找其子元素或者兄弟元素.（兼容性非常好，IE6下也兼容）。
语法:
　　. ancestor descendant（后代选择器）

　　　　在给定的祖先元素(ancestor)下匹配所有的后代元素(descendant).返回所有的后代元素.

　　7. parent > child（父子选择器）

　　　　在给定的父元素(parent)下匹配所有直接子元素(child),返回所有的直接子元素.

　　8. prev + next（相邻选择器）

　　　　匹配紧接在所有prev 元素后的 next(下一个) 元素,返回紧接的下一个元素.

　　9. prev ~ siblings 等同于nextAll()（兄弟选择器）

　　　　匹配 prev 元素之后的所有 siblings 元素.返回之后的所有兄弟节点.

3. 过滤选择器

　　1.基本过滤选择器

语法:
　　10. :first
　　　　用法: $(”tr:first”) ; 单个元素的组成的集合。
　　　　匹配找到的第一个元素
　　11. :last
　　　　匹配找到的最后一个元素。
　　12. :not(selector)
　　　　去除所有与给定选择器匹配的元素，not后面括号里面是一个选择的节点。
　　13. :even
　　　　匹配所有索引值为偶数的元素，从 0 开始计数。
　　14. :odd
　　　　匹配所有索引值为奇数的元素，从 0 开始计数。
　　15. :eq(index)
　　　　匹配一个给定索引值的元素，从 0 开始计数。
　　16. :gt(index)
　　　　匹配所有大于给定索引值的元素，从 0 开始计数。
　　17. :lt(index)
　　　　匹配所有小于给定索引值的元素，从 0 开始计数。
　　18. :header
　　　　匹配如 h1, h2, h3之类的标题元素。
　　　　$(‘:header’)获取所有的h对象.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <style>
        #box{
            width: 200px;
            height: 100px;
            background:red;
        }
    </style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
<div>盒子5</div>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
<div id="box"></div>
</body>

<script>
    //first 匹配第一个元素
    $("div:first").css("background", "#0b0");

    //last 匹配最后一个元素
    $("div:last").css("background", "#00f");

    //even 匹配索引是偶数的元素
    $("ul li:even").css("background", "#f00");

    //odd 匹配索引是奇数的元素
    $("ul li:odd").css("background", "#0f0");

    //gt(index) 匹配索引大于index的元素
    $("div:gt(2)").css("background", "#0f0");

    //lt(index) 匹配索引小于index的元素
    $("div:lt(3)").css("background", "#ddd");

    //eq(index) 匹配索引等于index的元素
    $("div:eq(3)").css("background", "#00f");

    //header 获取所有对象
    $(":header").css("background","red");

    //animated 匹配所有在执行动画的元素
    $("#box").click(function () {
        $(this).animate({"width":"1000px"},1000);
        $("div:animated").css("background","green");
    });
</script>
</html>

　　2.内容过滤选择器

　　内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本上。

语法:

　　19. :contains(text)

　　　　用法: $(”div:contains(’John’)”)

　　　　匹配包含给定文本的元素
　　20. :empty
　　　　用法: $(”td:empty”)
　　　　匹配所有不包含子元素或者文本的空元素
　　21. :has(selector)
　　　　用法: $(”div:has(p)”).addClass(”test”)
　　　　匹配含有选择器所匹配的元素的元素
　　22. :parent
　　　　用法: $(”td:parent”)
　　　　匹配含有子元素或者文本的元素（空白的文本也算是有子元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div>
    <p>这是一个盒子</p>
    <p>这是一个标签</p>
    <p>今天在下雨</p>
    <span>000</span>
</div>
<script>
    //含有给定文本的元素
    $("p:contains(下雨)").css("background","red");
    //是否包含某个元素或文本的空元素
    $("span:empty").css("background","red");
    //匹配包含某标签的元素
    $("div:has(p)").css("background","blue");
    //包含有子元素或文本的元素
    $("div:parent").css("background","#0a0");
</script>

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div>
    <p>这是一个盒子</p>
    <p>这是一个标签</p>
    <p>今天在下雨</p>
    <span>000</span>
</div>
<script>
    //含有给定文本的元素
    $("p:contains(下雨)").css("background","red");
    //是否包含某个元素或文本的空元素
    $("span:empty").css("background","red");
    //匹配包含某标签的元素
    $("div:has(p)").css("background","blue");
    //包含有子元素或文本的元素
    $("div:parent").css("background","#0a0");
</script>

</body>
</html>

　　3.可见性过滤选择器

　　查找隐藏或者显示的标签元素。
　　23. :hidden
　　　　用法: $(”input:hidden”)
　　　　说明: 匹配所有的不可见元素
　　24. :visible
　　　　用法: $(”input:visible”)
　　　　匹配所有的可见元素

　　4.属性过滤选择器

代码:

<style type="text/css">
    /*高亮显示*/
    .highlight{
    background-color: gray
}
</style>

代码:

<body>
<div>
<p>Hello</p>
</div>
<div id="test">ID为test的DIV</div>
<input type="checkbox" id="s1" name="football" value="足球" />足球
<input type="checkbox" name="volleyball" value="排球" />排球
<input type="checkbox" id="s3" name="basketball" value="篮球" />篮球
<input type="checkbox" id="s4" name="other" value="其他" />其他
</body>

1. [attribute]用法

定义：匹配包含给定属性的元素

代码:

$("div[id]").addClass("highlight"); //查找所有含有ID属性的div元素

2. [attribute=value]用法

定义：匹配给定的属性是某个特定值的元素

代码:

$("input[name='basketball']").attr("checked",true); //name属性值为basketball的input元素选中

3. [attribute!=value]用法

定义：匹配给定的属性是不包含某个特定值的元素

代码:

$("input[name!='basketball']").attr("checked",true); //name属性值不为basketball的input元素选中
//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);

4. [attribute^=value]用法

定义：匹配给定的属性是以某些值开始的元素

代码:

$("input[name^='foot']").attr("checked",true); //查找所有 name 以 'foot' 开始的 input 元素

5. [attribute$=value]用法

定义：匹配给定的属性是以某些值结尾的元素

代码:

$("input[name$='ball']").attr("checked",true); //查找所有 name 以 'ball' 结尾的 input 元素

6. [attribute*=value]用法

定义：匹配给定的属性是以包含某些值的元素

代码:

$("input[name*='sket']").attr("checked",true); //查找所有 name 包含 'sket' 的 input 元素

7. [selector1][selector2][selectorN]用法

定义：复合属性选择器，需要同时满足多个条件时使用

代码:

//找到所有含有 id属性，并且它的 name属性是以 ball结尾的
$("input[id][name$='ball']").attr("checked",true);

　　5. 子元素过滤选择器

这里值得一提的是:nth-child()，这个选择器的详细功能如下：

　　1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素
　　2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
　　3、nth-child(2) 能选取每个父元素下的索引值等于2的元素
　　4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始
　　5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素，n从0开始
　　6、特别注意系数为负数的情况：nth-child(-3n+8). 选择的包括第8 、第5、第2 个子元素，当3=3的时候，-3*3+8=-1，就结束选择了。

　　6. 表单对象属性过滤选择器

　　根据表单对象的属性操作查找符合条件的表单元素对象.

25. :enabled和:disabled

　　匹配所有可用和不可用的表单元素对象

26. :checked

　　匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

27. :selected

　　匹配下拉列表中所有选中的option元素

表单选择器

课堂练习

改变 id 为 one 的元素的背景色为 #0000FF
改变 class 为 mini 的所有元素的背景色为 #FF0033
改变元素名为 <div> 的所有元素的背景色为 #00FFFF
改变所有元素的背景色为 #00FF33
改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF
改变 <body> 内所有 <div> 的背景色为 #0000FF
改变 <body> 内子 <div> 的背景色为 #FF0033
改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF
改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF

改变第一个 div 元素的背景色为 #0000FF
改变最后一个 div 元素的背景色为 #0000FF
改变class不为 one 的所有 div 元素的背景色为 #0000FF
改变索引值为偶数的 div 元素的背景色为 #0000FF
改变索引值为奇数的 div 元素的背景色为 #0000FF
改变索引值为大于 3 的 div 元素的背景色为 #0000FF
改变索引值为等于 3 的 div 元素的背景色为 #0000FF
改变索引值为小于 3 的 div 元素的背景色为 #0000FF
改变所有的标题元素的背景色为 #0000FF

改变当前正在执行动画的所有元素的背景色为 #0000FF
改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 #0000FF
改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF
改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF
改变不含有文本 di; 的 div 元素的背景色
改变所有可见的div元素的背景色为 #0000FF
选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF

CSS样式操作方法（重点）

CSS 行内样式操作

css()方法用于获取、设置元素的一个或多个属性。方法如下：$(selector).css();
例：

$("p").css("color","red");//该示例用于设置元素的颜色属性为红色;
$("p").css("color");//该示例用于获得元素的color样式值;
//该示例用于设置元素的多个样式。
$("p").css({"font-size":"30px","backgroundColor":"#888888"});

注意：jQuery中写css的时候。

1、如果值是数字，自动转为像素，比如设置盒子的宽度和高度等。
2、css()方法中，如果属性中带有中杠 “-”，比如font-size,background-color,设置这些属性的时候，如果不带引号，就要采用驼峰式写法。

例如：

$("li").css({"font-size":"30px","background-color":"red"});
$("li").css({fontSize:"30px",backgroundColor:"red"});

CSS类样式的操作

添加类名：addClass()方法，使用该方法对目标元素添加相应的样式。

方法：$(element).addClass();

$("p").addClass("p1");//该示例设置元素p的样式为p1。

移除删除：removeClass()方法，使用该方法移除目标元素的指定样式。

方法：$(element).removeClass();

$("p").removeClass("ul");//该方法去除掉p元素的ul类样式。

判断是否添加或删除类名：toggleClass()方法，如果有就删除名，如果没有就加类名。

方法：$(element).toggleClass();

$("p").toggleClass("p1");//该方法来回切换【添加删除实现切换】元素p的样式p1.

判断元素是否有指定类名：$(element).hasClass()

方法：$(element).hasClass(class);

注意: 如果有指定类名,返回值为true, 否则返回false

alert($("p").hasClass("ul"));//打印出p元素是否有ul样式。

addClass()和attr()方法设置样式的不同，attr方法把元素的属性名对应的属性值设为方法中的参数值，addClass()则把属性值。

添加到属性名对应的属性值中。例：已有元素<p class='class1'>元素样式</p>,使用attr()和addClass()分别添加新样式。
$("p").attr("class","another").结果是<p class='another'>元素样式</p>
$("p").addClass("class","another")结果是<p class='class1 another'>元素样式</p>

属性操作方法attr()和prop()（重点）

attr()和removeAttr() 自定义属性
prop()和removeProp() 标准属性

属性操作

js:

　　标准属性:
　　　　获取属性: js对象.属性名
　　　　设置属性: js对象.属性名=值;

　　自定义属性:
　　　　获取属性: js对象.getAttribute('属性名');
　　　　设置属性: js对象.setAttribute('属性名','属性的值');
jq:
　　标准属性: prop()
　　　　获取属性: jq对象.prop('属性名')
　　　　设置属性: jq对象.prop('属性名','属性的值')

　　自定义属性:attr()
　　　　获取属性: jq对象.attr('属性名')
　　　　设置属性: jq对象.attr('属性名','属性的值')

注意:

1.attr()可以获取或设置标准属性和自定义属性
2. 在项目中一般使用attr()---除boolean属性以外
3.boolean属性一般常用prop()来操作
4.boolean属性: 属性名等于属性值

如: checked selected readyOnly disabled ....

例：

//该示例一次设置两个属性值。
$("p").attr({"title":"你最喜欢的水果","name":"水果"})。
//该方法就是移除p元素的name属性。
$("p").removeAttr("name");

课后练习

1、jquery选择器实现表格隔行换色效果。
主要实现功能：

1、奇数行和偶数行颜色不同。
2、表头的颜色与其他行颜色不同。
3、将内容包含“黑莓手机”的行字体颜色设置为绿色,字体大小：14px。
4、鼠标移动到某一行上mouseover，当前行颜色高亮(激活样式)显示，鼠标移动开后，恢复原来的颜色。
5、点击表头“序号”后面的复选框，将所有记录全选，再次点击，取消全选。

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <style>
        table{border-collapse: collapse;}
        table td {
            border: red 1px solid;
            width: 150px;
            text-align: center;
        }
        .active{background: green !important;/*把优先级提最高*/}
    </style>
</head>
<body>
<table>
    <tr>
        <td>序号<input type="checkbox"></td>
        <td>名称</td>
        <td>价格</td>
        <td>数量</td>
    </tr>
    <tr>
        <td>1<input type="checkbox"></td>
        <td>apple手机</td>
        <td>5000</td>
        <td>10</td>
    </tr>
    <tr>
        <td>2<input type="checkbox"></td>
        <td>小米手机</td>
        <td>3000</td>
        <td>10</td>
    </tr>
    <tr>
        <td>3<input type="checkbox"></td>
        <td>诺基亚手机</td>
        <td>2000</td>
        <td>12</td>
    </tr>
    <tr>
        <td>4<input type="checkbox"></td>
        <td>三星手机</td>
        <td>1000</td>
        <td>13</td>
    </tr>
    <tr>
        <td>5<input type="checkbox"></td>
        <td>黑莓手机手机</td>
        <td>5500</td>
        <td>14</td>
    </tr>
</table>

<script>
    //奇数偶数行颜色不一样
    $("table tr:even").css("background","#f00");
    $("table tr:odd").css("background","#fff");
    $("table tr:first-child").css("background","yellow");
    //修改包含黑莓手机的字体大小和颜色
    $("table td:contains('黑莓手机')").css({"color":"#00f","fontSize":"20px"});
    //4.鼠标移动到某一行上mouseover，当前行颜色 高亮(激活样式)显示，鼠标移动开后，恢复原来的颜色
    //方式一：直接使用.css（）的方式
/*
    //鼠标移入
    $("table tr").mouseover(function () {
        $(this).css("background","green");
    });
    //鼠标移出
    $("table tr").mouseout(function () {
        $("table tr:even").css("background","#f00");
        $("table tr:odd").css("background","#fff");
        $("table tr:first-child").css("background","yellow");
    });
 */

/*
    //方式二：先获取当前tr的背景色，存到一个变量中，移出时再恢复
    //鼠标移入
    var bgcolor='';//颜色初始值
    $("table tr").mouseover(function () {
       bgcolor = $(this).css("background");//获取当前颜色
       //修改颜色
        $(this).css("background","green");
    });
    //鼠标移出
    $("table tr").mouseout(function () {
        $(this).css("background",bgcolor);
    });
*/
    //方式三：使用一个类来操作
    $("table tr").mouseover(function () {
        $(this).addClass("active");//添加颜色
    }).mouseout(function () {
        $(this).removeClass("active");//删除颜色
    });

    //5、点击表头“序号”后面的复选框，将所有记录全选，再次点击，取消全选。
    $("table tr:first td input").click(function () {
        //获取input标签的状态
        var bool = $(this).prop("checked");
        if(bool){
            $("table tr td input").prop("checked",bool);
        }else{
            $("table tr td input").prop("checked",bool);
        }
    });
</script>
</body>
</html>

2、将前面3个的产品背景改为蓝色，将第4个产品的名称颜色改为红色，将第6以后的产品价格改为粉色，将最后一个产品的背景改为粉色，将第6个产品的评论字体大小设置为16px；

3、用ul实现下列布局，有图标的li要加上图标。使用jquery让3n+1的li字体颜色变为红色。

面试题

1 请问常见的JavaScript框架有哪些？各种框架有什么优缺点？
2 说一说 :input 和 input 两种选择器的相同点与不同点。

posted @ 2021-02-25 16:14 全村的希望、阅读(185) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不负青春，不负代码

三、（1）jQuery入门及选择器

jQuery简介（了解）

什么是jQuery

JavaScript框架

为什么要学习和使用jQuery

jQuery被用在哪里

jQuery版本划分

jQuery入门体验

jQuery中的 $ 符号

使用JQuery的大前提

选择器

什么是选择器

为什么要使用选择器

选择器分类

表单选择器

CSS样式操作方法（重点）

CSS 行内样式操作

CSS类样式的操作

属性操作方法attr()和prop()（重点）

课后练习

面试题

公告