Python/jquery
一 jQuery是什么？
<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二 什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象var variable = DOM 对象$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML jquery的基础语法 $(selector).action()
三、寻找元素（选择器和筛选器）
3.1 选择器：基本选择器：
查找所有标签并进行设置
$('*').css('color','red')
1 2 3 4 5Title 6 7 8912 13 14 17 18 19 -------------------------------------------------------------------------ll
10ll
11
id标选择器签并进行设置
$('#p2').css('color','red') 1 2 3 4 5Title 6 7 8912 13 14 17 18ll
10ll
11
class选择器标签并进行设置
$('.p1').css('color','red')
1 2 3 4 5Title 6 7 8912 13 14 17 18ll
10ll
11
组合选择器
$('#p2,.p1').css('color','red')
1 2 3 4 5Title 6 7 8912 13 14 17 18ll
10ll
11
层次选择器：
子元素选择器
$('.p>#p2').css('color','red') 1 2 3 4 5Title 6 7 8915 16 17 20 21ll
10ll
111214ppp
13
后代元素选择器
$('.p p').css('color','red') 1 2 3 4 5Title 6 7 8915 16 17 20 21ll
10ll
111214ppp
13
紧邻下一一个元素选择器：
$('.p+div').css('color','red') 1 2 3 4 5Title 6 7 8915ll
10ll
111214ppp
13tt16 17 18 21 22
兄弟元素选择器：
$('.p~div').css('color','red') 1 2 3 4 5Title 6 7 8915ll
10ll
111214ppp
13tt16 17 18 21 22
过滤选择器（重点）
第一个li
$('.item:first').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
最后一个：
$('.item:last').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
挑选下标为偶数的
$('.item:even').css('color','red')
1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
挑选下标为奇数的
$('.item:odd').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
下标等于4的
$('.item:eq(4)').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
下标大于2的
$('.item:gt(3)').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
下标下于3的
$('.item:lt(3)').css('color','red')
1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
挑选除 id=li的
$('.item:not(#li)').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
查找存不存在
console.log($('ul li').hasClass("item")) 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
内容过滤器选择器：
包含33文本的元素
$('.item:contains(33)').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
不包含子元素或文本为空的标签
$('.item:empty').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11 12
- 44 13
- 55 14
含有子元素或者文本的元素
$('.item:parent').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
属性选择器：
$('[id=li]').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
表单选择器：
匹配所有 input, textarea, select 和 button 元素
$(':input').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(':text').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
所有密码框
$(':password').css('color','red') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
所有单选按钮
$(':radio').css('width','400px') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
所有复选框
$(':checkbox').css('width','400px') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
所有提交按钮
$(':submit').css('width','400px') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
所有button按钮 $(':button').css('width','400px') 1 2 3 4 5Title 6 7 8
- 9
- 11 10
- 22 11
- 33 12
- 44 13
- 55 14
$([type='text'])------$(":text") 注意值适用于input标签 $('input:checked') 查找筛选器 查找（子代标签） $('.p').children(".a").css('color','red') 
查找后代（孙子辈）
$('.p').find(".a").css('color','red') 查找下一个兄弟：
$('.a').next().css('color','red') 
查找下边的全部兄弟标签：
$('.a').nextAll().css('color','red') 
开区间（设定到哪结束）
$('.a').nextUntil(".pd").css('color','red') 
$('.pd').prev().css('color','red') 
查找上边所有的兄弟
$('.pd').prevAll().css('color','red') 
查找父类：
console.log($('.pd').parent()) 
查找多个父类
console.log($('.pd').parents()) 查找所有的兄弟标签（除了自己以外）
$('.pd').siblings().css('color','red') 
实例之左拉菜单
1 2 3 4 5left_menu 6 13 38 39 40 4142 69 70 7172 73 74
属性操作案例：
1 2 3 4 5Title 6 7 8 9 10ppp
1112 DIV13 点击1415 16DIV217 18 19 20 21 22 23 24 35
tab切换
1 2 3 4 5Title 6 43 44 45 46 4748 5360 61 72 73 74 75 76 77 78 79 80 81 82 83 845458 5911155 56 57
添加对话框：
1 2 3 4 5Title 6 7 8 91015 16 28 2911 12 1314
jquecry 循环：
1 2 3 4 5Title 6 7 8 9
- 10
- 11 11
- 22 12
- 33 13
tab全选、反选：
1 2 3 4 5Title 6 7 8 9表格实例
10 11 12 13 14
| 17 | 222 | 18333 | 19
| 22 | 222 | 23333 | 24
| 27 | 222 | 28333 | 29
动画效果：
1 2 3 4 5Title 6 7 8 9 10hello world
1113 14 15 16 17 18 38
滑动效果：
1 2 3 4 5Title 6 14 15 16hello world
17 18 19 20 21滑动效果22 23 24 25 36 37 38 39
文档操作：
1 2 3 4 5Title 6 7 8911 12 13 40 41ppp
10
淡入淡出：
1 2 3 4 5Title 6 13 14 15 16 17 18 19 20 21 22 23 34 35
