jQuery
1、jQuery和JS和HTML的关系
首先了HTML是实际展示在用户面前的用户可以直接体验到的，JS是操作HTML的他能改变HTML实际展示给用户的效果！
首先了解JS是一门语言，他是运行在浏览器上的。
jQuery是什么呢？他是对JS进行了封装，成了一个类库，就类似于python中的类，我们用的时候直接掉类库了就行了非常方便。比如paramiko模块,我们要使用paramiko就得学习里面的方法。
2、jQuery分为的几部分
------找
----选择器
----筛选器
------操作
----css
----属性
----文档
------事件
----事件
----ajax请求
----json
jQuery选择器
1、id选择器-常用
id选择器，通过id去匹配元素：（#号来表示）
html代码：
<div id="notMe"><p>>> <div id="myDiv">>>
jQuery代码：
$("#myDiv");
注：jQuery代码中的$可以理解为他就是jQuery，举例来说在们在学习python中导入了一个模块json咱们在用的时候是json.什么概念是一样的
结果：
<div id="myDiv">>>
如果id名中有特殊的符号，在特殊符号前面加上\\即可
2、元素名（标签）选择器-常用
根据指定的元素名（标签），去匹配元素。例如<div>标签、<a>标签、<p>标签等。。。
html代码：
<div>DIV1</div> <div>DIV2</div> <span>SPAN</span>
jQuery代码：
$("div");
结果：（匹配所有的div标签）
[ <div>DIV1</div>, <div>DIV2</div> ]
3、指定类（指定样式类）选择器-常用
根据指定的样式类匹配元素
html代码：
<div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span>
jQuery代码：
$(".myClass");
结果：
<div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span>
4、所有元素（*），多用于结合上下文来搜索。
html代码：
<div>DIV</div> <span>SPAN</span> <p>P</p>
jQuery代码：
$("*")
结果：
<div>DIV</div> <span>SPAN</span> <p>P</p>
5、关联选择器（比如某个元素下的一个和多个元素匹配）
html代码：
<div id="t1"> <div> <a>hello jQuery</a> <span></span> </div> </div>
jQuery代码：
我要找到id=1下面的所有a标签，在（）内以空格分割就是谁下面的谁
$('#t1 a')
结果：
<a>hello jQuery</a>
6、组合选择器（匹配多个元素-常用）
html代码：
<a class="c1"></a> <div class="c1"></div> <a></a> <span></span>
jQuery代码：
$('.c1,a')
找到html内的class=‘c1’的标签和a标签
结果：
<a class="c1"></a> <div class="c1"></div> <a></a>
注：上面这些选择器是最基础的也是最常用的。
7、其他的选择器
这个链接还有其他的选择器的使用，需要都看下：http://www.php100.com/manual/jquery/
8、表单form，input系列
html代码：
<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>
jQuery代码：
$(':input')
上面的代码就是找到所有的input的标签
jQuery代码：
$(':text')
上面的意思是找到所有的input的标签并且type=‘text’，他和$('input[type='text']')效果是一样的
jQuery代码：
$(':text,password')
上面的意思是找到所有的input的标签并且type='text'或type='password'的标签
表单对象属性：
html代码：
<!--checked="checked" 默认选中--> <input type="checkbox" checked="checked"/> <input type="checkbox" checked="checked"/> <input type="checkbox" /> <input type="checkbox" />
jQuery代码：
$("input:checked")
找到input标签选中的标签
jQuery筛选器
1、筛选器过滤
1、eq
html代码
<p> This is just a test.</p> <p> So is this</p>
我要找到index为1的p标签
$("p").eq(1)
效果如下：
<p> So is this</p>
注：有同学会问我用选择器也可以实现类似的效果啊？代码如下：
$('p:eq(1)')
有什么区别呢？
看下面的例子：
例子1：
innp = raw_input()
$('p').eq(innp)
例子2：
innp = raw_input()
content = "p:eq(" + innp + ")"
这里第二个例子中他是字符串，他不能直接传参数，那么jQuery的筛选器相当于对选择器进行了一些封装。
2、hasClass 判断是否有相应的样式并返回True或者False
html代码：
<div id='l1' class="protected"></div> <div id='l2'></div>
jQuery代码：
var result = $('#l1').hasClass('protected')
result = true
var result = $('#l2').hasClass('protected')
result = false
3、map
html代码：
<table> <thead></thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td onclick="get_prev(this)">编辑</td> </tr> </tbody> </table>
jQuery代码：
function get_prev(arg){
//$(arg).sibling() 当前标签的所有标签
var list = $(arg).siblings().map(function () {
//map和python中的map类似,循环每个标签并做好相应的操作
//每一个标签被循环时,都会执行map里面的函数
//将所有的结果封装到一个数组中(列表)
return $(this).text();
//返回列表
});
console.log(list[0],list[1],list[2])
}
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige</title> </head> <body> <table> <thead></thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td onclick="get_prev(this)">编辑</td> </tr> </tbody> </table> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript"> function get_prev(arg){ //$(arg).sibling() 当前标签的所有标签 var list = $(arg).siblings().map(function () { //map和python中的map类似,循环每个标签并做好相应的操作 //每一个标签被循环时,都会执行map里面的函数 //将所有的结果封装到一个数组中(列表) return $(this).text(); //返回列表 }); console.log(list[0],list[1],list[2]) } </script> </body> </html>
2、查找
在上面我们已经用过了，看下面的实例：
我们使用到了：
parent().siblings().find('.content')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige</title> <style> .content{ } .hide{ display: none; } </style> </head> <body> <div> <div onclick="change(this)" id="m1">菜单一</div> <div class="content"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <div onclick="change(this)" id="m2">菜单二</div> <div class="content hide"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <div onclick="change(this)" id="m3">菜单三</div> <div class="content hide"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript"> function change(arg) { //一 找到下一个标签,移除hide样式 //$(arg).next() 下一个标签 //removeClass('') 移除样式 $(arg).next().removeClass('hide'); //二 找到其他菜单,内容隐藏,添加hide //当前标签的父亲标签$(arg).parent() //所有父亲标签的兄弟标签 $(arg).parent().siblings().find('.content').addClass('hide'); } </script> </body> </html>
1、children
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
html代码如下：
<p onclick="print()">Hello</p> <div> <span>Hello Again</span> <div> <span>hello shuaige</span> </div> </div> <p>And Again</p>
jQuery代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige</title> <style> .content{ } .hide{ display:none; } .color_add{ background-color: red; } </style> </head> <body> <p onclick="print()">Hello</p> <div> <span>Hello Again</span> <div> <span>hello shuaige</span> </div> </div> <p>And Again</p> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script> function print() { $('div').children().addClass('color_add'); } </script> </body> </html>