Jquery-基本概念和寻找元素

一：简要介绍

jquery 是一个优秀的javascript框架。是轻量级别的js库，压缩后只有21k。兼容css3，同时兼容各种浏览器。

jQuery是个快速的，简洁的javascript库，让用户可以更快速，方便的处理html、documents、events、实现动画效果。并且方便的为网站提供aajax交互

jQuery的文档说明很全。而且各种应用说明也比较详细。还有很多成都的插件。

jQuery 对象，是通过jQuery包装DOM后产生的对象。是jQquey独有的。如果一个对象是jQuery对象。那么他就可以使用jQuery 里的方法.

http://jquery.cuishifeng.cn/

二、查找方法

2.1 选择器

2.1.1 基本选择器

$("#id") $(".class") $("element") $("div, span")

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

2.1.2 层级选择器

$("form input") $(".outer>div") $(".outer+div") $(".outer~div")

<form class="outer">
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

2.1.3 基本筛选器

以列表为例子

$("li:first") 列表第一个

$("li:eq(2)") 列表索引2的数据

$("li:even") 列表索引是偶数的数据

$("li:gt(1)") 列表索引大于1 的数据

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

2.1.4 属性选择器

查找包含某个属性，或者属性等于具体某个值的数据

$("div[id]") $("div[id = 'test2']")

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

$("input[id][name$='man']")

选择有id 属性，且名称是 man 开头的标签

1 <input id="man-news" name="man-news" />
2 <input name="milkman" />
3 <input id="letterman" name="new-letterman" />
4 <input name="newmilk" />

$("input[name='newletter']").attr("checked",true)

查找input标签中，名称为newletter，设置checked的值为true，具体的属性的操后，后面具体讲解。

1 <input type="checkbox" name="newsletter" value="Hot Fuzz" />
2 <input type="checkbox" name="newsletter" value="Cold Fusion" />
3 <input type="checkbox" name="accept" value="Evil Plans" />

2.1.5 表单选择器

$("[type='radio']")

$(":radio")

$(":input")

$(":input:first")

针对input标签，可以通过 $("[type='radio']") 选择type 为radio的标签，也可以简写为 $(":radio")。

可以 $(":input") 找到全部标签。 $(":input:first") 找到input的第一个标签。（参考基本筛选器）

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>

2.2 筛选器

2.2.1 过滤筛选器

$('li').first() 列表的第一个元素

$("li").eq(2) 获取索引是2 的元素

1 <ul>
2     <li>list item 1</li>
3     <li>list item 2</li>
4     <li>list item 3</li>
5     <li>list item 4</li>
6     <li>list item 5</li>
7 </ul>

2.2.2 查找筛选器

$("div").children(".test") 查找div的孩子标签中，包含class 为test的标签

　　$("div").find(".test") 查找div的下面，孩子，孙子中，包含class为test的标签

　　 $(".test").next() 找到class为test的下一个标签

　　$(".test").nextAll() 找到class为test的下面的所有的标签

　 $(".test").nextUntil() 找到class为test的下面一直到xxx的标签

$("div").prev() 查找div的前一个标签

$("div").prevAll() 查找div的前面的标签

$("div").prevUntil() 查找div的前面的所有的标签一直到xxxx

$(".test").parent() 查找test的父亲标签

　　 $(".test").parents() 查找test的祖先标签

$(".test").parentUntil() 找到test的祖先标签一直到xxxx

$("div").siblings() 查找div的兄弟标签

1 <div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

样例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>tab</title>
 6 
 7     <style>
 8         *{
 9             margin: 0px;
10             padding: 0px;
11         }
12         .tab_outer{
13             margin: 0px auto;
14             width: 60%;
15         }
16         .menu{
17             background-color: #cccccc;
18             /*border: 1px solid red;*/
19             line-height: 40px;
20         }
21         .menu li{
22             display: inline-block;
23         }
24         .menu a{
25             border-right: 1px solid red;
26             padding: 11px;
27         }
28         .content{
29             background-color: tan;
30             border: 1px solid green;
31             height: 300px;
32         }
33         .hide{
34             display: none;
35         }
36 
37         .current{
38             background-color: darkgray;
39             color: yellow;
40             border-top: solid 2px #0095bb;
41         }
42     </style>
43 </head>
44 <body>
45       <div class="tab_outer">
46           <ul class="menu">
47               <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
48               <li xxx="c2" onclick="tab(this);">菜单二</li>
49               <li xxx="c3" onclick="tab(this);">菜单三</li>
50           </ul>
51           <div class="content">
52               <div id="c1">内容一</div>
53               <div id="c2" class="hide">内容二</div>
54               <div id="c3" class="hide">内容三</div>
55           </div>
56 
57       </div>
58 </body>
59 
60 <script src="jquery-3.1.0.js"></script>
61 
62 <script>
63 
64     function tab(self){
65         var index = $(self).attr("xxx");
66         $("#"+index).removeClass("hide");  // content 通过# + index 得到字符串#id。针对这个标签移除hide类属性
67         $("#"+index).siblings().addClass("hide") //content 兄弟节点添加hide 隐藏属性
68 
69         $(self).addClass("current");  //tab 通过# + index 得到字符串#id。针对这个标签。添加当前选中状态的class 属性
70         $(self).siblings().removeClass("current") // tab   兄弟节点移除，选中状态下的class 属性
71     }
72 </script>
73 </html>

切换tab标签

上面的代码中，以下几行为核心部分

function tab(self){
    var index = $(self).attr("xxx");
    $("#"+index).removeClass("hide");  // content 通过# + index 得到字符串#id。针对这个标签移除hide类属性
    $("#"+index).siblings().addClass("hide") //content 兄弟节点添加hide 隐藏属性

    $(self).addClass("current");  //tab 通过# + index 得到字符串#id。针对这个标签。添加当前选中状态的class 属性
    $(self).siblings().removeClass("current") // tab   兄弟节点移除，选中状态下的class 属性
}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>left_menu</title>
 6 
 7     <style>
 8           .menu{
 9               height: 500px;
10               width: 30%;
11               background-color: gainsboro;
12               float: left;
13           }
14           .content{
15               height: 500px;
16               width: 70%;
17               background-color: rebeccapurple;
18               float: left;
19           }
20          .title{
21              line-height: 50px;
22              background-color: #425a66;
23              color: forestgreen;}
24 
25 
26          .hide{
27              display: none;
28          }
29 
30 
31     </style>
32 </head>
33 <body>
34 
35 <div class="outer">
36     <div class="menu">
37         <div class="item">
38             <div class="title" onclick="show(this);">菜单一</div>
39             <div class="con">
40                 <div>111</div>
41                 <div>111</div>
42                 <div>111</div>
43             </div>
44         </div>
45         <div class="item">
46             <div class="title" onclick="show(this);">菜单二</div>
47             <div class="con hide">
48                 <div>111</div>
49                 <div>111</div>
50                 <div>111</div>
51             </div>
52         </div>
53         <div class="item">
54             <div class="title" onclick="show(this);" yan="kk">菜单三</div>
55             <div class="con hide">
56                 <div>111</div>
57                 <div>111</div>
58                 <div>111</div>
59             </div>
60         </div>
61 
62     </div>
63     <div class="content"></div>
64 
65 </div>
66 
67 
68 <script src="jquery-3.1.0.js">
69 
70 </script>
71 
72 
73 <script>
74     function show(self){
75         $(self).next().removeClass("hide");
76         $(self).parent().siblings().children(".con").addClass("hide");
77 
78     }
79 </script>
80 </body>
81 </html>

左侧菜单