Jquery - nikitapp - 博客园

详细的中文文档
http://jquery.cuishifeng.cn/

转换：
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)

一、查找元素
选择器，直接找到某个或者某类标签
1. id
$('#id')
2. class
<div class='c1'></div>
$(".c1")
3. 标签
$('a')

4. 组合a
$('a,.c2,#i10')

5. 层级
$('#i10 a') 子子孙孙
$('#i10>a') 儿子

6. 基本
:first
:last
:eq()

7. 属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签

实例：
多选，反选，全选，Tab菜单

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8     <style>
  9         .hiden{
 10             display: none;
 11         }
 12         .head{
 13             background-color: blue;
 14             width: 300px;
 15             text-align: center;
 16         }
 17         .text{
 18             text-align: center;
 19             width: 300px;
 20         }
 21         th{
 22             width: 180px;
 23             height: 30px;
 24             text-align: center;
 25         }
 26         td{
 27             width: 180px;
 28             height: 30px;
 29             text-align: center;
 30         }
 31     </style>
 32 <body>
 33     <div style="float: left">
 34         <div class="head">标题1</div>
 35         <div class="text">
 36             <div>内容1</div>
 37             <div>内容1</div>
 38             <div>内容1</div>
 39         </div>
 40         <div class="head">标题2</div>
 41         <div class="text hiden">
 42             <div>内容2</div>
 43             <div>内容2</div>
 44             <div>内容2</div>
 45         </div>
 46         <div class="head">标题3</div>
 47         <div class="text hiden">
 48             <div>内容3</div>
 49             <div>内容3</div>
 50             <div>内容3</div>
 51         </div>
 52     </div>
 53     <div style="float: right">
 54         <table id="il">
 55             <thead>
 56                 <tr>
 57                     <th>1</th>
 58                     <th>2</th>
 59                     <th>3</th>
 60                     <th>
 61                         <input type="button" value="全选" onclick="ChooseAll()">
 62                         <input type="button" value="取消" onclick="CancleAll()">
 63                         <input type="button" value="反选" onclick="ReverseAll()">
 64                     </th>
 65 
 66                 </tr>
 67             </thead>
 68             <tbody>
 69                 <tr>
 70                     <td>aaaa</td>
 71                     <td>aaaa</td>
 72                     <td>aaaa</td>
 73                     <td>
 74                         <input type="checkbox">
 75                     </td>
 76                 </tr>
 77                 <tr>
 78                     <td>bbbb</td>
 79                     <td>bbbb</td>
 80                     <td>bbbb</td>
 81                     <td>
 82                         <input type="checkbox">
 83                     </td>
 84                 <tr>
 85                     <td>cccc</td>
 86                     <td>cccc</td>
 87                     <td>cccc</td>
 88                     <td>
 89                         <input type="checkbox">
 90                     </td>
 91                 </tr>
 92             </tbody>
 93     </div>
 94     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
 95     <script>
 96         function ShowMeue(){
 97             $('.text').each(function(){this.removeClass('hiden')})
 98         }
 99         function ChooseAll(){
100             $(':checkbox').prop('checked',true);
101         }
102         function CancleAll(){
103             $(':checkbox').prop('checked',false);
104         }
105         function ReverseAll(){
106             $(':checkbox').each(function(){
107                 if (this.checked){
108                     this.checked = false;
109                 }else {
110                     this.checked=true;
111                 }
112             })
113         }
114         $('.head').click(function(){
115             $(this).siblings('.text').addClass('hiden');
116             $(this).next().removeClass('hiden');
117             })
118     </script>
119 </body>
120 </html>

View Code

- 选择权

-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： $('#tb:checkbox').xxxx

- $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
- var v = 条件 ? 真值 : 假值

筛选

$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')

$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')

$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil()

$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)

文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容

$(..).html()
$(..).html("<a>1</a>")

$(..).val()
$(..).val(..)
样式操作：
addClass
removeClass
toggleClass

属性操作：
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')

<input type='checkbox' id='i1' />

# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)

PS:
index 获取索引位置

文档处理：
append
prepend
after
before

remove
empty

clone
css处理

$('t1').css('样式名称', '样式值')
点赞：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             height: 50px;
 9             width: 40px;
10             position: relative;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="c1">
16         <div>赞</div>
17     </div>
18     <div class="c1">
19         <div>赞</div>
20     </div>
21     <div class="c1">
22         <span>赞</span>
23     </div>
24     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
25     <script>
26         $('.c1').click(function(){
27             Add(this)
28         });
29         function Add(self){
30             var size = 5;
31             var opacity = 1;
32             var right = 0;
33             var top =0;
34             var a = document.createElement('span');
35             $(a).text('+1');
36             $(a).css('position','absolute');
37             $(a).css('color','red');
38             $(a).css('opacity',opacity);
39             $(a).css('size',size + 'px');
40             $(a).css('right',right +'px');
41             $(a).css('top',top+'px');
42             $(self).append(a);
43             var obj = setInterval(function(){
44                size = size + 1;
45                opacity = opacity - 0.1;
46                right = right - 3;
47                top = top - 3 ;
48                $(a).css('opacity',opacity);
49                $(a).css('size',size + 'px');
50                $(a).css('right',right +'px');
51                $(a).css('top',top+'px');
52                $(self).append(a);
53                if (opacity < 0){
54                    clearInterval(obj);
55                }
56             },50)
57         }
58     </script>
59 </body>
60 
61 </html>

View Code

- $('t1').append()

- $('t1').remove()
- setInterval 按照指定的周期（以毫秒计）来调用函数或计算表达式

- clearInterval 取消setInterval()方法设置的定时器

- 透明度 1 》 0
- position
- 字体大小，位置
位置：
$(window).scrollTop() 获取滚轮的位置
$(window).scrollTop(0) 设置滚轮的位置
scrollLeft([val])

offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标

position() 指定标签相对父标签(relative)标签的坐标

<div id="i1" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div>

$('i1').height() //height = height(100) =100
$('i1').innerHeight() //height = height(100) + padding(10*2) =120
$('i1').outerHeight() //height = height(100) + padding(10*2) + border(1*2) =122
$('i1').outerHeight(true) //height = height(100) + padding(10*2) + border(1*2) + margin(5*2) =132

事件
DOM：三种绑定方式
jQuery：
$('.c1').click()

$('.c1').bind('click',function(){
})

$('.c1').unbind('click',function(){
})

**** 用于添加或删除标签，然后绑定事件（其他只能绑定现有的标签，不能绑定添加或删除的）
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})

$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})

阻止事件发生
return false（阻止后面href 跳转）

# 当页面框架加载完成之后，自动执行
$(function(){

$(...)

})

jQuery扩展：使用方式
- $.extend $.方法
- $.fn.extend $(选择器).方法

posted on 2018-03-20 14:40 nikitapp 阅读(130) 评论(0) 收藏举报

刷新页面返回顶部