zoukankan      html  css  js  c++  java

  • jQuery各种效果举例

    jQuery

    所有jQuery详细使用说明请见：http://www.php100.com/manual/jquery/

    jQuery的作用是操作浏览器html，从而达到用户的可视化效果，按照功能可分为三大类:

    • 找
      • 选择器
      • 筛选
    • 操作
      • 属性
      • css
      • 文档
    • 其它
      • 时间
      • Ajax
      • json
      • ......

    $符号：$就相当于jQuery这个模块 $(.class) = jQuery(.class)

     1、找

    1.1选择器

    基本：

    #id

    用于搜索的，通过元素的 id 属性中给定的值

     1 查找 ID 为"myDiv"的元素。
 2 HTML 代码:
 3 <div id="notMe"><p>id="notMe"</p></div>
 4 <div id="myDiv">id="myDiv"</div>
 5 
 6 jQuery 代码:
 7 $("#myDiv");
 8 
 9 结果:
10 [ <div id="myDiv">id="myDiv"</div> ]
    #id

     element(标签)

    一个用于搜索的元素。指向 DOM 节点的标签名。

     1 描述:
 2 查找一个 DIV 元素。
 3 
 4 HTML 代码:
 5 <div>DIV1</div>
 6 <div>DIV2</div>
 7 <span>SPAN</span>
 8 
 9 jQuery 代码:
10 $("div");
11 
12 结果:
13 [ <div>DIV1</div>, <div>DIV2</div> ]
    element

    .class

    一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。

     1 描述:
 2 查找所有类是 "myClass" 的元素.
 3 
 4 HTML 代码:
 5 <div class="notMe">div class="notMe"</div>
 6 <div class="myClass">div class="myClass"</div>
 7 <span class="myClass">span class="myClass"</span>
 8 
 9 jQuery 代码:
10 $(".myClass");
11 
12 结果:
13 [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
    class

    组合选择器：

    空格：  层级关系

    逗号：and，多项匹配

    属性：

    [attribute]

    匹配包含给定属性的元素。

     1 描述:
 2 查找所有含有 id 属性的 div 元素
 3 
 4 HTML 代码:
 5 <div>
 6   <p>Hello!</p>
 7 </div>
 8 <div id="test2"></div>
 9 
10 jQuery 代码:
11 $("div[id]")
12 
13 结果:
14 [ <div id="test2"></div> ]
    attribute

    [attribute=value]

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

     1 描述:
 2 查找所有 name 属性是 newsletter 的 input 元素
 3 
 4 HTML 代码:
 5 <input type="checkbox" name="newsletter" value="Hot Fuzz" />
 6 <input type="checkbox" name="newsletter" value="Cold Fusion" />
 7 <input type="checkbox" name="accept" value="Evil Plans" />
 8 
 9 jQuery 代码:
10 $("input[name='newsletter']").attr("checked", true);
11 
12 结果:
13 [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
    attribute=value

    以此类推其它的几个属性:

    [attribute！=value]

    　　匹配所有不含有指定的属性，或者属性不等于特定值的元素。

    [attribute^=value]

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

    [attribute$=value]

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

    [attribute*=value]

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

     

    子元素：

    ：nth-child

    匹配其父元素下的第N个子或奇偶元素

    ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。

    :nth-child从1开始的，而:eq()是从0算起的！

    可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

     1 描述:
 2 在每个 ul 查找第 2 个li
 3 
 4 HTML 代码:
 5 <ul>
 6   <li>John</li>
 7   <li>Karl</li>
 8   <li>Brandon</li>
 9 </ul>
10 <ul>
11   <li>Glen</li>
12   <li>Tane</li>
13   <li>Ralph</li>
14 </ul>
15 
16 jQuery 代码:
17 $("ul li:nth-child(2)")
18 
19 结果:
20 [ <li>Karl</li>,   <li>Tane</li> ]
    :nth-child

    ：first-child   匹配第一个子元素

    ：last-child   匹配最后一个子元素

    ：only-child  如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配。

    表单：

    专属于Input标签里的属性

    写法：   $(":text") = $("input[type=text]")

    ：input

    匹配所有 input, textarea, select 和 button 元素

     1 描述:
 2 查找所有的input元素，下面这些元素都会被匹配到。
 3 HTML 代码:
 4 <form>
 5     <input type="button" value="Input Button"/>
 6     <input type="checkbox" />
 7 
 8     <input type="file" />
 9     <input type="hidden" />
10     <input type="image" />
11 
12     <input type="password" />
13     <input type="radio" />
14     <input type="reset" />
15 
16     <input type="submit" />
17     <input type="text" />
18     <select><option>Option</option></select>
19 
20     <textarea></textarea>
21     <button>Button</button>
22 
23 </form>
24 jQuery 代码:
25 $(":input")
26 结果:
27 [ 
28     <input type="button" value="Input Button"/>,
29     <input type="checkbox" />,
30 
31     <input type="file" />,
32     <input type="hidden" />,
33     <input type="image" />,
34 
35     <input type="password" />,
36     <input type="radio" />,
37     <input type="reset" />,
38 
39     <input type="submit" />,
40     <input type="text" />,
41     <select><option>Option</option></select>,
42 
43     <textarea></textarea>,
44     <button>Button</button>,
45  ]
    :input

    :text

    :password

    :radio

    :checkbox

    :submit

    :image

    :reset

    :button   匹配所有按钮

     1 描述:
 2 查找所有按钮.
 3 
 4 HTML 代码:
 5 <form>
 6   <input type="text" />
 7   <input type="checkbox" />
 8   <input type="radio" />
 9   <input type="image" />
10   <input type="file" />
11   <input type="submit" />
12   <input type="reset" />
13   <input type="password" />
14   <input type="button" />
15   <select><option/></select>
16   <textarea></textarea>
17   <button></button>
18 </form>
19 
20 jQuery 代码:
21 $(":button")
22 
23 结果:
24 [ <input type="button" />,<button></button> ]
    :button

    :file

    :hidden

    表单对象属性

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

     1 描述：
 2 查找所有选中的复选框元素
 3 
 4 HTML 代码:
 5 <form>
 6   <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
 7   <input type="checkbox" name="newsletter" value="Weekly" />
 8   <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
 9 </form>
10 
11 jQuery 代码:
12 $("input:checked")
13 
14 结果:
15 [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
    :checked

    :enabled    匹配所有可用元素

    :display    匹配所有不可用元素

    :selected    匹配所有选中的option元素

    1.2筛选

     过滤

    eq(index|-index)

    获取第N个元素  与选择器里面的eq类似，都是从0算起。

    不同：筛选的.eq(1) 是整数类型  而选择的 ”:eq(1)“ 是字符串

    在为一个函数传参数时，筛选的整数传参方式就简单很多，而选择器的字符串需要拼接

     1 参数index描述:
 2 获取匹配的第二个元素
 3 
 4 HTML 代码:
 5 <p> This is just a test.</p> <p> So is this</p>
 6 
 7 jQuery 代码:
 8 $("p").eq(1)
 9 
10 结果:
11 [ <p> So is this</p> ]
12 
13 
14 参数-index描述:
15 获取匹配的第二个元素
16 
17 HTML 代码:
18 <p> This is just a test.</p> <p> So is this</p>
19 
20 jQuery 代码:
21 $("p").eq(-2)
22 
23 结果:
24 [ <p> This is just a test.</p> ]
    eq

    hasClass

    检查当前的元素是否含有某个特定的类，如果有，则返回true,否则false

    map(callback)   

    将一组元素转换成其他数组（不论是否是元素数组） callback(给每个元素执行的函数)

    你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

     1 描述：点击编辑，获取其他标签里的值
 2 
 3 html代码：
 4 <table>
 5         <thead></thead>
 6         <tbody>
 7             <tr>
 8                 <td>1</td>
 9                 <td>2</td>
10                 <td>3</td>
11                 <td onclick="get_prev(this);">编辑</td>
12             </tr>
13         </tbody>
14 </table>
15 
16 
17 jQuery代码：
18 
19 function get_prev(arg){
20 //            $(arg).siblings()所有兄弟;
21 //            循环多个标签中的每一个标签
22 //            每一个标签被循环时，都会执行map内部的函数，并获取其返回值
23 //            将所有的返回值都封装在一个数组（列表）中
24 //            返回列表
25 
26 //            $(this) 相当于当前循环的每一个标签
27             var list= $(arg).siblings().map(function(){
28 
29                 return $(this).text();
30             });
31             console.log(list[0],list[2]);
32         }
    map(callback)

     查找

    children([expr])

    取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

    可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

     1 描述:
 2 查找DIV中的每个子元素。
 3 
 4 HTML 代码:
 5 <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
 6 
 7 jQuery 代码:
 8 $("div").children()
 9 
10 结果:
11 [ <span>Hello Again</span> ]
12 
13 
14 描述:
15 在每个div中查找 .selected 的类。
16 
17 HTML 代码:
18 <div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
19 
20 jQuery 代码:
21 $("div").children(".selected")
22 
23 结果:
24 [ <p class="selected">Hello Again</p> ]
    children

    find(expr|obj|ele)

    搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

    所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

     1 描述:
 2 从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
 3 
 4 HTML 代码:
 5 <p><span>Hello</span>, how are you?</p>
 6 
 7 jQuery 代码:
 8 $("p").find("span")
 9 
10 结果:
11 [ <span>Hello</span> ]
    find

    next([expr])

    取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

     这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

     1 描述:
 2 找到每个段落的后面紧邻的同辈元素。
 3 
 4 HTML 代码:
 5 <p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
 6 
 7 jQuery 代码:
 8 $("p").next()
 9 
10 结果:
11 [ <p>Hello Again</p>, <div><span>And Again</span></div> ]
12 
13 描述:
14 找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
15 
16 HTML 代码:
17 <p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
18 
19 jQuery 代码:
20 $("p").next(".selected")
21 
22 结果:
23 [ <p class="selected">Hello Again</p> ]
    next

    nextAll([expr])

    查找当前元素之后所有的同辈元素。

    可以用表达式过滤

     1 描述:
 2 给第一个div之后的所有元素加个类
 3 
 4 HTML 代码:
 5 <div></div><div></div><div></div><div></div>
 6 
 7 jQuery 代码:
 8 $("div:first").nextAll().addClass("after");
 9 
10 结果:
11 [ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]
    nextAll

    nextUntill

    查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

     1 描述:
 2 给#term-2后面直到dt前的元素加上红色背景
 3 HTML 代码:
 4 <dl>
 5   <dt>term 1</dt>
 6   <dd>definition 1-a</dd>
 7   <dd>definition 1-b</dd>
 8   <dd>definition 1-c</dd>
 9   <dd>definition 1-d</dd>
10 
11   <dt id="term-2">term 2</dt>
12   <dd>definition 2-a</dd>
13   <dd>definition 2-b</dd>
14   <dd>definition 2-c</dd>
15 
16   <dt>term 3</dt>
17   <dd>definition 3-a</dd>
18   <dd>definition 3-b</dd>
19 </dl>
20 jQuery 代码:
21 $('#term-2').nextUntil('dt').css('background-color', 'red');
22       
23 var term3 = document.getElementById("term-3");
24 $("#term-1").nextUntil(term3, "dd").css("color", "green");
25 结果:
26 term 1
27 definition 1-a
28 definition 1-b
29 definition 1-c
30 definition 1-d
31 term 2
32 definition 2-a
33 definition 2-b
34 definition 2-c
35 term 3
36 definition 3-a
37 definition 3-b
    nextUtill

    prev([expr])  向上匹配

    prevAll([expr])

    prevUntill

    parent([expr])

    取得一个包含着所有匹配元素的唯一父元素的元素集合。

    你可以使用可选的表达式来筛选。

     1 描述:
 2 查找每个段落的父元素
 3 
 4 HTML 代码:
 5 <div><p>Hello</p><p>Hello</p></div>
 6 
 7 jQuery 代码:
 8 $("p").parent()
 9 
10 结果:
11 [ <div><p>Hello</p><p>Hello</p></div>]
12 
13 
14 描述:
15 查找段落的父元素中每个类名为selected的父元素。
16 
17 HTML 代码:
18 <div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
19 
20 jQuery 代码:
21 $("p").parent(".selected")
22 
23 结果:
24 [ <div class="selected"><p>Hello Again</p></div> ]
    parent

    parents([expr])

    取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

     1 描述:
 2 找到每个span元素的所有祖先元素。
 3 
 4 HTML 代码:
 5 <html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
 6 
 7 jQuery 代码:
 8 $("span").parents()
 9 
10 
11 描述:
12 找到每个span的所有是p元素的祖先元素。
13 
14 jQuery 代码:
15 $("span").parents("p")
    parents

    parentsUtill

    查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

     1 描述:
 2 查找item-a的祖先，但不包括level-1
 3 HTML 代码:
 4 <ul class="level-1">
 5   <li class="item-i">I</li>
 6   <li class="item-ii">II
 7     <ul class="level-2">
 8       <li class="item-a">A</li>
 9       <li class="item-b">B
10         <ul class="level-3">
11           <li class="item-1">1</li>
12           <li class="item-2">2</li>
13           <li class="item-3">3</li>
14         </ul>
15       </li>
16       <li class="item-c">C</li>
17     </ul>
18   </li>
19   <li class="item-iii">III</li>
20 </ul>
21 jQuery 代码:
22 $('li.item-a').parentsUntil('.level-1')
23     .css('background-color', 'red');
    parentsUtill

    siblings([expr])

    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

     1 描述:
 2 找到每个div的所有同辈元素。
 3 HTML 代码:
 4 <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
 5 jQuery 代码:
 6 $("div").siblings()
 7 结果:
 8 [ <p>Hello</p>, <p>And Again</p> ]
 9 描述:
10 找到每个div的所有同辈元素中带有类名为selected的元素。
11 HTML 代码:
12 <div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
13 jQuery 代码:
14 $("div").siblings(".selected")
15 结果:
16 [ <p class="selected">Hello Again</p> ]
    siblings

    1.3jQuery中的循环：

    $.each(列表数据,function(){

    　　函数体;

    })

    字典为特殊的列表

    1 var a = [11,22,33,44]
2 
3 $.each(a,function(item){
4          console.log(a[item]);
5 })
6 
7 a 要循环的列表
8 function(ele){}   把列表a中每个循环到的元素去执行function函数
9 item: 代表列表中每个循环到的元素的索引值index
    列表循环
    1 var d = {'k1':'v1','k2':'v2','k3':'v3'}
2 
3 $.each(d,function(key,value){
4          console.log(key,value);
5 })
6 
7 d 要循环的字典
8 function(key,value){}   把字典d中每个循环到的key,value去执行方法
9 key,value: 代表字典中每个k,v的值
    字典循环

    $(列表数据).each(function(){

    　　函数体;

    　　$(this) = 要循环的每一项

    }) 

    1.4属性

    属性

    attr(name|properties|key,value|fn)

    设置或返回被选元素的属性值。

     1 参数name 描述:
 2 返回文档中所有图像的src属性值。
 3 
 4 jQuery 代码:
 5 $("img").attr("src");
 6 
 7 参数properties 描述:
 8 为所有图像设置src和alt属性。
 9 
10 jQuery 代码:
11 $("img").attr({ src: "test.jpg", alt: "Test Image" });
12 
13 参数key,value 描述:
14 为所有图像设置src属性。
15 
16 jQuery 代码:
17 $("img").attr("src","test.jpg");
18 
19 参数key,回调函数 描述:
20 把src属性的值设置为title属性的值。
21 
22 jQuery 代码:
23 $("img").attr("title", function() { return this.src });
    attr

    removeAttr(name)

    从每一个匹配的元素中删除一个属性

     1 描述:
 2 将文档中图像的src属性删除
 3 
 4 HTML 代码:
 5 <img src="test.jpg"/>
 6 
 7 jQuery 代码:
 8 $("img").removeAttr("src");
 9 
10 结果:
11 [ <img /> ]
    removeAttr

    prop(name|properties|key,value|fn)

    获取在匹配的元素集中的第一个元素的属性值。(复选框) 
     1 参数name 描述:
 2 选中复选框为true，没选中为false
 3 jQuery 代码:
 4 $("input[type='checkbox']").prop("checked");
 5 参数properties 描述:
 6 禁用页面上的所有复选框。
 7 jQuery 代码:
 8 $("input[type='checkbox']").prop({
 9   disabled: true
10 });
11 参数key,value 描述:
12 禁用和选中所有页面上的复选框。
13 jQuery 代码:
14 $("input[type='checkbox']").prop("disabled", false);
15 $("input[type='checkbox']").prop("checked", true);
16 参数key,回调函数 描述:
17 通过函数来设置所有页面上的复选框被选中。
18 jQuery 代码:
19 $("input[type='checkbox']").prop("checked", function( i, val ) {
20   return !val;
21 });
    prop

    removeProp(name)

    用来删除由.prop()方法设置的属性集

    CSS类：

    addClass(class|fn)  为每个匹配的元素添加指定的类名。

    removeClass(clss|fn)  从所有匹配的元素中删除全部或者指定的类。

    toggleClass(class|fn[,sw])   

    如果存在（不存在）就删除（添加）一个类。

     1 参数class 描述:
 2 为匹配的元素切换 'selected' 类
 3 jQuery 代码:
 4 $("p").toggleClass("selected");
 5 参数class,switch 描述:
 6 每点击三下加上一次 'highlight' 类
 7 HTML 代码:
 8 <strong>jQuery 代码:</strong>
 9 jQuery 代码:
10   var count = 0;
11   $("p").click(function(){
12       $(this).toggleClass("highlight", count++ % 3 == 0);
13   });
14 回调函数 描述:
15 根据父元素来设置class属性
16 jQuery 代码:
17 $('div.foo').toggleClass(function() {
18   if ($(this).parent().is('.bar') {
19     return 'happy';
20   } else {
21     return 'sad';
22   }
23 });
    toggleClass

    HTML代码/文本/值：

    text([val|fn])

    取得所有匹配元素的内容。    

    结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

     1 无参数 描述:
 2 返回p元素的文本内容。
 3 
 4 jQuery 代码:
 5 $('p').text();
 6 
 7 参数val 描述:
 8 设置所有 p 元素的文本内容
 9 
10 jQuery 代码:
11 $("p").text("Hello world!");
12 
13 回调函数 描述:
14 使用函数来设置所有匹配元素的文本内容。
15 
16 jQuery 代码:
17 $("p").text(function(n){
18     return "这个 p 元素的 index 是：" + n;
19     });
    text

    html([val|fn])

    取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

    在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

     1 无参数 描述:
 2 返回p元素的内容。
 3 jQuery 代码:
 4 $('p').html();
 5 参数val 描述:
 6 设置所有 p 元素的内容
 7 jQuery 代码:
 8 $("p").html("Hello <b>world</b>!");
 9 回调函数描述:
10 使用函数来设置所有匹配元素的内容。
11 jQuery 代码:
12 $("p").html(function(n){
13     return "这个 p 元素的 index 是：" + n;
14     });
    html

    val(val)

    取出input,select,textarea标签中输入的值,

    参数为空时为取值，参数存在时为设置值

    1 $('#hostname').val(new_list[0]);
2 $('#ip').val(new_list[1]);
3 $('#port').val(new_list[2]);
    val
     1 html代码
 2     <div>
 3         <select  id="name">
 4             <option value="1">男</option>
 5             <option value="2">女</option>
 6         </select>
 7         <input type="button" onclick="GetValue();"/>
 8     </div>
 9 
10 
11 jQuery代码：
12         function GetValue(){
13 //            获取id=name 下value的值
14             var w = $('#name').val();
15 //            获取id=name下option[value=2]的内容
16             var s = $('#name option[value=2]').text();
17             console.log(w);
18             console.log(s);
19         }
    select.val

    1.5 CSS

    CSS

    css(name|pro|[,val|fn])

    访问匹配元素的样式属性。

     1 参数name 描述:
 2 取得第一个段落的color样式属性的值。
 3 jQuery 代码:
 4 $("p").css("color");
 5 参数properties 描述:
 6 将所有段落的字体颜色设为红色并且背景为蓝色。
 7 jQuery 代码:
 8 $("p").css({ color: "#ff0011", background: "blue" });
 9 参数name,value 描述:
10 将所有段落字体设为红色
11 jQuery 代码:
12 $("p").css("color","red");
13 参数name,回调函数 描述:
14 逐渐增加div的大小
15 jQuery 代码:
16   $("div").click(function() {
17     $(this).css({
18        function(index, value) {
19         return parseFloat(value) * 1.2;
20       }, 
21       height: function(index, value) {
22         return parseFloat(value) * 1.2;
23       }
24     });
25   });
    CSS

    位置

    scrollTop([val])

    获取匹配元素相对滚动条顶部的偏移。

     1 <body>
 2 
 3     <input type="button" onclick="GoBacktop();" value="返回顶部"/>
 4     <div id="content" style="height: 200px;500px; overflow: auto;">
 5         <p>ww</p>
 6         <p>ww</p>
 7         <p>ww</p>
 8         <p>ww</p>
 9         <p>ww</p>
10         <p>ww</p>
11         <p>ww</p>
12         <p>ww</p>
13         <p>ww</p>
14         <p>ww</p>
15         <p>ww</p>
16         <p>ww</p>
17         <p>ww</p>
18         <p>ww</p>
19         <p>ww</p>
20         <p>ww</p>
21         <p>ww</p>
22         <p>ww</p>
23     </div>
24 
25     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
26     <script type="text/javascript">
27 
28     function GoBacktop(){
29 //        设置id=content的元素滚动条顶部距离为0
30         $('#content').scrollTop(0);
31 
32 //        设置浏览器的滚动条顶部距离为0
33 //        $(window).scrollTop(0);
34     }
35 
36     </script>
    scrollTop

    scrollLeft([val])

    获取匹配元素相对滚动条左侧的偏移。

    offset([coordinates])

    获取匹配元素在当前视口的相对偏移。相对整个页面的位置

     1 获取第二段的偏移量：
 2 
 3 <body>
 4     <div style="height: 1500px;"></div>
 5     <div id="d1">wwwwwww</div>
 6     <!--浏览器默认会有一个边距为8px-->
 7 
 8 
 9     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
10     <script type="text/javascript">
11 
12         var w = $('#d1').offset();
13         console.log(w);
14 
15     </script>
16 </body>
17 
18 结果：
19 left: 8
20 top: 1508
21 
22 
23 
24 
25 参数coordinates 描述:
26 获取第二段的偏移
27 HTML 代码:
28 <p>Hello</p><p>2nd Paragraph</p>
29 
30 jQuery 代码:
31 $("p:last").offset({ top: 10, left: 30 });
    offset

    position()

    获取匹配元素相对父元素的偏移。

     1 获取id=d2的标签相对父标签的偏移量：
 2 
 3     <div style="height: 1500px;"></div>
 4     <div style="padding: 50px; position: relative;">
 5         <div id="d2" >aaaaaaa</div>
 6     </div>
 7 
 8     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
 9     <script type="text/javascript">
10 
11         var w = $('#d2').position();
12         console.log(w);
13 结果：
14 {top: 50, left: 50}
    position

    1.6事件

    事件

    $(window).scroll()

    设置页面加载后，每一次滚动滑轮就触发事件

     1 <body>
 2 
 3     <div>
 4         <div style="height: 500px";>
 5             <h1>第一章</h1>
 6         </div>
 7 
 8         <div style="height: 1500px;">
 9             <h1>第二章</h1>
10         </div>
11 
12         <div style="height: 2000px;" >
13             <h1>第三章</h1>
14         </div>
15     </div>
16 
17 
18     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
19     <script type="text/javascript">
20 
21 //        当页面加载时，就会注册事件，滚动滑轮就会触发事件
22 
23         $(function () {
24             $(window).scroll(function() {
25                 console.log(123);
26             })
27         })
28         
29     </script>
30 </body>
    window.scroll

     1.7文档处理

    内部插入

    append(content|fn)

    向每个匹配的元素内部追加内容。 
     1 向所有段落中追加一些HTML标记。
 2 
 3 HTML 代码:
 4 <p>I would like to say: </p>
 5 
 6 jQuery 代码:
 7 $("p").append("<b>Hello</b>");
 8 
 9 结果:
10 [ <p>I would like to say: <b>Hello</b></p> ]
    append

    appendTo(content)

    把所有匹配的元素追加到另一个指定的元素元素集合中。

    实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

     1 描述:
 2 把所有段落追加到ID值为foo的元素中。
 3 HTML 代码:
 4 <p>I would like to say: </p>
 5 <div></div><div></div>
 6 jQuery 代码:
 7 $("p").appendTo("div");
 8 结果:
 9 <div><p>I would like to say: </p></div>
10 <div><p>I would like to say: </p></div>
11 描述:
12 新建段落追加div中并加上一个class
13 HTML 代码:
14 <div></div><div></div>
15 jQuery 代码:
16  $("<p/>")
17    .appendTo("div")
18    .addClass("test")
19    .end()
20    .addClass("test2");
21 结果:
22 <div><p class="test test2"></p></div>
23 <div><p class="test"></p></div>
    appendTo

    prepend(content)

    向每个匹配的元素内部前置内容。

    这是向所有匹配元素内部的开始处插入内容的最佳方式。

     1 描述:
 2 向所有段落中前置一些HTML标记代码。
 3 HTML 代码:
 4 <p>I would like to say: </p>
 5 jQuery 代码:
 6 $("p").prepend("<b>Hello</b>");
 7 结果:
 8 [ <p><b>Hello</b>I would like to say: </p> ]
 9 描述:
10 将一个DOM元素前置入所有段落
11 HTML 代码:
12 <p>I would like to say: </p>
13 <p>I would like to say: </p>
14 <b class="foo">Hello</b>
15 <b class="foo">Good Bye</b>
16 jQuery 代码:
17 $("p").prepend( $(".foo")[0] );
18 结果:
19 <p><b class="foo">Hello</b>I would like to say: </p>
20 <p><b class="foo">Hello</b>I would like to say: </p>
21 <b class="foo">Hello</b>
22 <b class="foo">Good Bye</b>
23 描述:
24 向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
25 HTML 代码:
26 <p>I would like to say: </p><b>Hello</b>
27 jQuery 代码:
28 $("p").prepend( $("b") );
29 结果:
30 <p><b>Hello</b>I would like to say: </p>
    prepend

    prependTo(content)

    把所有匹配的元素前置到另一个、指定的元素元素集合中。

    实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

     1 描述:
 2 把所有段落追加到ID值为foo的元素中。
 3 
 4 HTML 代码:
 5 <p>I would like to say: </p><div id="foo"></div>
 6 
 7 jQuery 代码:
 8 $("p").prependTo("#foo");
 9 
10 结果:
11 <div id="foo"><p>I would like to say: </p></div>
    prependTo

    外部插入

    after(content|fn)

    在每个匹配的元素之后插入内容

     1 描述:
 2 在所有段落之后插入一些HTML标记代码。
 3 HTML 代码:
 4 <p>I would like to say: </p>
 5 jQuery 代码:
 6 $("p").after("<b>Hello</b>");
 7 结果:
 8 <p>I would like to say: </p><b>Hello</b>
 9 描述:
10 在所有段落之后插入一个DOM元素。
11 HTML 代码:
12 <b id="foo">Hello</b><p>I would like to say: </p>
13 jQuery 代码:
14 $("p").after( $("#foo")[0] );
15 结果:
16 <p>I would like to say: </p><b id="foo">Hello</b>
17 描述:
18 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
19 HTML 代码:
20 <b>Hello</b><p>I would like to say: </p>
21 jQuery 代码:
22 $("p").after( $("b") );
23 结果:
24 <p>I would like to say: </p><b>Hello</b>
    after

    before(content|fn)

    在每个匹配的元素之前插入内容

    insertAfter(content)

    把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

    实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

    1 描述:
2 把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
3 HTML 代码:
4 <p>I would like to say: </p><div id="foo">Hello</div>
5 jQuery 代码:
6 $("p").insertAfter("#foo");
7 结果:
8 <div id="foo">Hello</div><p>I would like to say: </p>
    insertAfter

    insertBefore(content)

    把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

    实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

    删除

    empty()

    删除匹配的元素集合中所有的子节点。

     1 把所有段落的子元素（包括文本节点）删除
 2 
 3 HTML 代码:
 4 <p>Hello, <span>Person</span> <a href="#">and person</a></p>
 5 
 6 jQuery 代码:
 7 $("p").empty();
 8 
 9 结果:
10 <p></p>
    empty

    remove([expr])

    从DOM中删除所有匹配的元素。
     1 从DOM中把所有段落删除
 2 HTML 代码:
 3 <p>Hello</p> how are <p>you?</p>
 4 jQuery 代码:
 5 $("p").remove();
 6 结果:
 7 how are
 8 描述:
 9 从DOM中把带有hello类的段落删除
10 HTML 代码:
11 <p class="hello">Hello</p> how are <p>you?</p>
12 jQuery 代码:
13 $("p").remove(".hello");
14 结果:
15 how are <p>you?</p>
    remove

    detach([expr])

     1 描述:
 2 从DOM中把所有段落删除
 3 
 4 HTML 代码:
 5 <p>Hello</p> how are <p>you?</p>
 6 
 7 jQuery 代码:
 8 $("p").detach();
 9 
10 结果:
11 how are
12 
13 描述:
14 从DOM中把带有hello类的段落删除
15 
16 HTML 代码:
17 <p class="hello">Hello</p> how are <p>you?</p>
18 
19 jQuery 代码:
20 $("p").detach(".hello");
21 
22 结果:
23 how are <p>you?</p>
    detach

    复制

    clone([Even[,deepEven]])

    克隆匹配的DOM元素并且选中这些克隆的副本。

    在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

     1 描述:
 2 克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
 3 HTML 代码:
 4 <b>Hello</b><p>, how are you?</p>
 5 jQuery 代码:
 6 $("b").clone().prependTo("p");
 7 结果:
 8 <b>Hello</b><p><b>Hello</b>, how are you?</p>
 9 描述:
10 创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
11 HTML 代码:
12 <button>Clone Me!</button>
13 jQuery 代码:
14 $("button").click(function(){
15   $(this).clone(true).insertAfter(this);
16 });
    clone

    1.8插件 

    jQuery.extend(object)

    扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。

    1 在jQuery命名空间上增加两个函数。
2 jQuery 代码:
3 jQuery.extend({
4   min: function(a, b) { return a < b ? a : b; },
5   max: function(a, b) { return a > b ? a : b; }
6 });
7 结果:
8 jQuery.min(2,3); // => 2
9 jQuery.max(4,5); // => 5
    extend

    一般扩展jQuery会用自执行函数添加

    1 jQuery 代码：
2 (function (arg) {
3     arg.extend({
4         "chenchao": function () {
5             return 12345;
6         }
7     });
8 })(jQuery);

    两种方式执行方法一样：

    1 <script src="js/jquery-1.8.2.min.js"></script>
2 <script src="chenchao.js"></script>
3 <script >
4     var ret = $.chenchao();
5     console.log(ret);
6 
7 </script>

     2、一些其它的知识点

    2.1获取JS中的全局变量

    window[‘变量名’]

     1 STATUS = [
 2     {'id':1,'text':"在线"},
 3     {'id':2,'text':"离线"}
 4 ];
 5 
 6 BUSINESS = [
 7     {'id':1,'text':"二手车"},
 8     {'id':2,'text':"大保健"},
 9     {'id':3,'text':"车商城"}
10 ];
11 
12 传参的形式获取变量：
13 var all_val = window[“STATUS”]
14 var all_val = window[“BUSINESS”]
15 
16 
17 如果要获取变量里的值可以循环：
18 
19 $.each(all_val, function (index,value) {
20                    value.text;
21                     value.id;
22                 });
23 
24 index为all_val值得索引
25 value为字典里的值
    windown

    2.2将字符串类型的数字，转换为数字类型

    parseInt('123')

     2.3三种绑定事件方法

    dom绑定

    1 HTML代码：
2 <a onclick="AddCondition()">This is Dom bing event!</a>
3 
4 jQurey代码:
5 function AddCondition(){
6             函数体
7         }
    Dom绑定事件

    jQurey绑定

    当批量对某一类标签定义事件时使用

     1 HTML代码：
 2 <div id="js1">This is jQuery bind event!</div>
 3 
 4 
 5 jQuery代码：
 6 
 7 //        当doc文档加载完毕之后，自动执行此处代码
 8         $(function () {
 9 
10 //            第一种绑定
11             $('#js1').click(function () {
12                 alert($(this).text());
13             });
14 
15 //            第二种绑定
16             $('#js1').bind("click", function () {
17                 alert($(this).text());
18             })
19         });
    jQuery绑定事件

    jQuery各种示例：

     1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13 
14     <div>
15         <div>
16             <div  onclick="Chang(this);">菜单一</div>
17             <div class="content">
18                 <div>1</div>
19                 <div>2</div>
20                 <div>3</div>
21             </div>
22         </div>
23 
24         <div>
25             <div  onclick="Chang(this);">菜单二</div>
26             <div class="content hide">
27                 <div>11</div>
28                 <div>22</div>
29                 <div>33</div>
30             </div>
31         </div>
32 
33         <div>
34             <div  onclick="Chang(this);">菜单三</div>
35             <div class="content hide">
36                 <div>111</div>
37                 <div>222</div>
38                 <div>333</div>
39             </div>
40         </div>
41     </div>
42 
43     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
44     <script type="text/javascript">
45 
46         function Chang(arg){
47 //            $(arg) $(this)就可以使用jQuery的方法了，相当于点击的标签，this是js的参数
48 //            $(arg).next()  当前标签的下一个兄弟标签
49 //            $(arg).parent()  当前标签的父标签
50 //            $(arg).parent().siblings()当前标签父标签的兄弟标签
51 //            find('.content')  找出正在处理的元素的后代元素
52 //            $(arg).next().show();
53 //            $(arg).parent().siblings().find('.content').hide()
54             $(arg).next().removeClass('hide');
55             $(arg).parent().siblings().find('.content').addClass('hide')
56         }
57 
58     </script>
59 
60 
61 
62 </body>
63 </html>
    左侧隐藏菜单

      1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         .model{
  8             position: fixed;
  9             left: 50%;
 10             top: 50%;
 11             width: 400px;
 12             height: 300px;
 13             background-color: #ddd;
 14             margin-left: -200px;
 15             margin-top: -150px;
 16         }
 17         .hide{
 18             display: none;
 19         }
 20     </style>
 21 
 22 </head>
 23 <body>
 24 
 25     <table border="1">
 26         <thead></thead>
 27         <tbody>
 28             <tr>
 29                 <td>1</td>
 30                 <td>2</td>
 31                 <td>3</td>
 32                 <td onclick="GetPrev(this);">编辑</td>
 33                 </tr>
 34             <tr>
 35                 <td>111</td>
 36                 <td>222</td>
 37                 <td>333</td>
 38                 <td onclick="GetPrev(this);">编辑</td>
 39                 </tr>
 40             <tr>
 41                 <td>1111</td>
 42                 <td>2222</td>
 43                 <td>3333</td>
 44                 <td onclick="GetPrev(this);">编辑</td>
 45                 </tr>
 46         </tbody>
 47 
 48     </table>
 49 
 50     <div id="dialog" class="model hide">
 51         <form action="" method="get">
 52             <p>主机名：<input type="text" id="hostname" value="123123" /></p>
 53             <p>IP：<input type="text" id="ip" value="192.168.1.1" /></p>
 54             <p>端口：<input type="text" id="port" value="3306" /></p>
 55             <input type="submit"  onclick="return SubmitForm()" value="提交"/>
 56             <input type="button" onclick="cancel()" value="取消"/>
 57         </form>
 58 
 59     </div>
 60 
 61     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
 62     <script type="text/javascript">
 63 
 64 
 65 //        1.弹出框
 66 //        2.取出表格中的数据
 67 //        3.将表格数据填充到弹出框中
 68         function GetPrev(ths){
 69             var list=[];
 70             $.each($(ths).prevAll(),function(i){
 71 //                i=每个元素的索引值
 72 //                var item = $(ths).prevAll()[i];
 73                 var text = $($(ths).prevAll()[i]).text();
 74                 list.push(text);
 75                     });
 76             var new_list = list.reverse();
 77             $('#hostname').val(new_list[0]);
 78             $('#ip').val(new_list[1]);
 79             $('#port').val(new_list[2]);
 80             $('#dialog').removeClass('hide');
 81         }
 82 
 83         function cancel(){
 84             $('#dialog').addClass('hide');
 85         }
 86 
 87 
 88         function SubmitForm(){
 89 //            1.获取表单中的值
 90 //            2.判断值是否为空
 91         var ret=true;
 92 //            遍历所有的input，只要有空值，就将ret设置为false
 93 //            $('input[type="text"]')
 94         $(':text').each(function(){
 95 //            $(this) 要循环的每一个元素
 96             var value = $(this).val();
 97         if(value.trim().length == 0){
 98             $(this).css('border-color','red');
 99             ret = false
100         }else{
101             $(this).css('border-color','green');
102         }
103 
104             });
105         return ret;
106 }
107 
108 
109     </script>
110 </body>
111 </html>
    弹出提交框

     

     1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <input type="button" onclick="CheckAll()" value="全选"/>
10 <input type="button" onclick="CheckReverse()" value="反选"/>
11 <input type="button" onclick="CheckCancel()" value="取消"/>
12 
13 
14 <table border="1">
15     <thead></thead>
16     <tbody id="tb1">
17         <tr>
18             <td><input type="checkbox"/></td>
19             <td>l1</td>
20         </tr>
21         <tr>
22             <td><input type="checkbox"/></td>
23             <td>l2</td>
24         </tr>
25         <tr>
26             <td><input type="checkbox"/></td>
27             <td>l3</td>
28         </tr>
29     </tbody>
30 
31 </table>
32 
33 
34 
35 
36 
37 
38     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
39     <script type="text/javascript">
40 
41 
42         function CheckAll(){
43 //            $('#tb1').find(':checkbox').attr('checked','checked');
44             $('#tb1').find(':checkbox').prop('checked',true);
45         }
46         function CheckReverse(){
47             $('#tb1').find(':checkbox').each(function () {
48                 if($(this).prop('checked')){
49                     $(this).prop('checked',false);
50                 }else{
51                     $(this).prop('checked',true);
52                 }
53             });
54         }
55         function CheckCancel(){
56             $('#tb1').find(':checkbox').prop('checked',false);
57         }
58     </script>
59 </body>
60 </html>
    复选框

     1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .bu{
 8             font-weight:bolder;
 9             position: fixed;
10             top: 20px;
11             left: 200px;
12             color: azure;
13             background-color: cornflowerblue;
14         }
15     </style>
16 </head>
17 <body>
18     <div id="current" class="bu"></div>
19 
20     <div>
21         <div class="chapter" style="height: 500px";>
22             <h1>第一章</h1>
23         </div>
24 
25         <div class="chapter" style="height: 1500px;">
26             <h1>第二章</h1>
27         </div>
28 
29         <div class="chapter" style="height: 20px;" >
30             <h1>第三章</h1>
31         </div>
32     </div>
33 
34 
35 
36     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
37     <script type="text/javascript">
38 
39 //        当页面加载时，就会注册事件，滚动滑轮就会触发事件
40 
41     $(function () {
42         $(window).scroll(function () {
43 //            获取窗体滚动条离顶部高度
44             var scroll_top = $(window).scrollTop();
45             var list = [];
46 //            循环每一个章节，获取每个章节距离窗体顶部的距离，并添加到列表中
47             $.each($('.chapter'), function (i) {
48                 var current_offsettop = $($('.chapter')[i]).offset().top;
49                 list.push(current_offsettop);
50             });
51 
52 //            循环列表中每一个章节的距顶高度，如果滚轮的距顶高度+窗口的高度=页面总高度
53 //            说明已经拉到最底部，直接显示最后章节
54 //            如果滚轮的下拉高度大于每一章节的距顶高度，显示当前章节
55             $.each(list, function (i) {
56                 if (scroll_top+$(window).height() == $(document).height()){
57                     $('#current').text($('.chapter').last().text());
58                     return
59                 }
60                 if (scroll_top>list[i]){
61                     $('#current').text($($('.chapter')[i]).text());
62                 }
63             });
64         })
65     })
66         
67     </script>
68 </body>
69 </html>
    章节滚动

     

     1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div id="search_conditions">
 9         <div class="condition">
10             <a onclick="AddCondition(this,'#search_conditions')"> + </a>
11             <input />
12         </div>
13     </div>
14 
15 
16     <script src="js/jquery-1.8.2.min.js"></script>
17     <script >
18         function AddCondition(ths,conditions){
19             var  clon = $(ths).parent().clone();
20             clon.children(':first').text('-').attr('onclick','RemoveCondition(this,"#search_conditions")');
21             $(conditions).append(clon);
22         }
23         function RemoveCondition(ths,conditions){
24             $(ths).parent().remove();
25         }
26     </script>
27 </body>
28 </html>
    克隆搜索框
  • 相关阅读:
    详解TCP三次握手
    Linux(Ubunt)使用日记------常用软件汇总(不定时更新)
    Linux(Ubuntu)使用日记------markdown文件与pdf,doc,docx文件的相互转化(pandoc使用)
    白板编程浅谈——Why, What, How
    深入理解Java 8 Lambda（语言篇——lambda，方法引用，目标类型和默认方法）
    我的算法学习之路
    redux的hook使用
    redux基础（添加中间件与异步）
    typescript书写规范
    用js手撕七种排序算法！！内附运行速度测试函数
  • 原文地址：https://www.cnblogs.com/chenchao1990/p/5210134.html
Copyright © 2011-2022 走看看