详细的中文文档
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>
- 选择权
-
$('#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>
- $('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; 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 $(选择器).方法
