一。JQuery的优点：1.体积小，2.强大的选择器，3.出色的DOM封装，4.可靠的事件处理机制，5.出色的浏览器兼容性，6.使用隐式迭代简化编程，7.丰富的插件支持

二。JQuery的语法

三。

 四。JQuery操作页面元素

1.addClass()

 1 <title>左导航菜单</title>
 2     <style type="text/css">
 3         li{list-style: none; line-height: 22px; cursor: pointer;}
 4         .current{background: #6cf; font-weight: bold; color: #fff;}
 5     </style>
 6 </head>
 7 <body>
 8 <ul>
 9     <li id="current">jQuery简介</li>
10     <li>jQuery语法</li>
11     <li>jQuery选择器</li>
12     <li>jQuery事件与动画</li>
13     <li>jQuery方法</li>
14 </ul>
15 <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
16 <script type="text/javascript">
17     $(document).ready(function(){
18         $("li").click(function(){
19             $("#current").addClass("current");
20         });
21     });
22 </script>

效果图：

2.css()

 1 <title>仿京东左侧菜单</title>
 2   <link href="css/style.css" rel="stylesheet"/>
 3  </head>
 4  <body>
 5     <div class="nav-box">
 6         <div class="nav-top"><a href="">全部商品分类</a></div>
 7         <ul>
 8             <li>
 9                 <a href="">家用电器</a><div><img src="images/erji.jpg"/></div>
10             </li>
11             <li>
12                 <a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="images/erji1.jpg"/></div>
13             </li>
14             <li>
15                 <a href="">电脑</a>、<a href="">办公</a><div><img src="images/erji2.jpg"/></div>
16             </li>
17             <li>
18                 <a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="images/erji3.jpg"/></div>
19             </li>
20             <li>
21                 <a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="images/erji4.jpg"/></div>
22             </li>
23         </ul>
24     </div>
25     <script src="js/jquery-1.12.4.js"></script>
26     <script src="js/hover.js"></script>
hover.js文件内容：
1 $(document).ready(function(){
2     //经过当前li背景变成橙色（效果图1）
3     $(this).css("background","orange");
4 }).mouseout(function(){
5     //离开li颜色变成之前的原色（效果图2）
6     $(this).css("background","#c81623");
7 })

效果图1：

 

效果图2：

3.设置元素的显示和隐藏

 1 $(document).ready(function(){
 2     /**一级内容悬浮**/
 3     $("li").mouseover(function(){
 4         $(this).css({"background":"orange"});//当前li 背景颜色为橙色
 5 
 6         $(this).children("div").show();//让相应二级内容显示
 7         
 8     }).mouseout(function(){
 9         
10              $(this).css({"background":"#c81623"});
11             $(this).children("div").hide();//隐藏
12 
13     });
14 });

效果图：

五。JQuery代码风格

1.链式操作：

 1 </head>
 2 <body>
 3 <h2>什么是受益人?</h2>
 4 <p>
 5     <strong>解答：</strong>
 6     受益人是指人身保险中由被保险人或者投保人指定的
 7     享有保险金请求权的人，投保人、被保险人可以为受益人。
 8 </p>
 9 <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
10 <script type="text/javascript">
11     $(document).ready(function() {
12         $("h2").click(function(){
13             $("h2").css("background-color","#CCFFFF").next().css("display","block");
14             //next();取回匹配该选择器的下一个同胞元素
15             //h2添加背景颜色，p显示出来
16         });
17     });
18 </script>

2.隐式迭代：

 1 <ul>
 2     <li>数码产品</li>
 3     <li>家用电器</li>
 4     <li>妇幼保健</li>
 5     <li>时尚丽人</li>
 6 </ul>
 7 <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
 8 <script type="text/javascript">
 9     $(document).ready(function() {
10         $("li").css({"font-weight":"bold","color":"red"});
11         //在JQuery中设置集合的属性，不需要遍历每一个元素，可以直接设置，这就是隐式迭代
12     });
13 </script>

 六。

 

 1     <div id="textName">
 2         <h2>jquery对象</h2>
 3     </div>
 4 </body>
 5 </html>
 6 <script src="js/jquery-1.12.4.js" type="javascript"></script>
 7 <script type="javascript">
 8     $(document).read(function(){
 9         var $textName=$("#textName");
10        /* //第一种方式；[index]把jQuery对象转成DOM对象
11         var textName=$textName[0];
12         console.log(textName.innerHTML)*/
13 
14         //第二种方式：get方法把jQuery方法转成DOM对象
15         var textName=$textName.get(0);
16         console.log(textName.innerHTML);
17 
18     })
19 </script>