你的位置:首页 > Java教程

[Java教程]Python开发【前端】:jQuery


jQuery简介

  jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
  jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
 

jQuery版本和使用

jQuery有1.x、2.x、3.x三个大的版本,推荐使用1.x的最新版本(兼容性更换),本次使用的版本为jquery-1.12.4.js

引用:

<script src="jquery-1.12.4.js"></script>

下载地址-》》jquery-1.12.4.js、jquery-1.12.4.min.js

Dom和jQuery对象相互转换

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="i1">James</div>  <script src="jquery-1.12.4.js"></script></body></html>

s1.html

jQuery转换为Dom:

> $('#i1')< [<div id=​"i1">​James​</div>​]> document.getElementById('i1')< <div id=​"i1">​James​</div>​>$('#i1')[0]< <div id=​"i1">​James​</div>​

Dom转换为jQuery:  

> $('#i1')< [<div id=​"i1">​James​</div>​]> d1 = document.getElementById('i1')< <div id=​"i1">​James​</div>​> $(d1)< [<div id=​"i1">​James​</div>​]

 

jQuery选择器

一、基本选择器

id选择器

<div id="id">James</div>$('#id')

clss选择器

<div >James</div>$('.c1')

标签选择器 

查找所有的a标签:<div id="id">James</div><div >  <a>f</a></div><div >  <a>f</a>  <a>f</a></div>$('a')

④ *表示所有

$('*')

多查询(selector1,selector2,selectorN)

<div id="id">James</div><div >  <a>f</a></div><div >  <a>f</a>  <a>f</a></div>$('#id,.c1,a')

二、层级选择器

 ancestor descendant(查找包含的所有)

<div id="i1" >  <div>    <a>a</a>  </div>  <a>b</a>  <a>c</a></div>> $('#i1 a')< [<a>​a​</a>​, <a>​b​</a>​, <a>​c​</a>​]

parent > child(只查找下一级所有)

<div id="i1" >  <div>    <a>a</a>  </div>  <a>b</a>  <a>c</a></div>> $('#i1 > a')< [<a>​b​</a>​, <a>​c​</a>​]

prev + next(查找同级相邻的一个)

<div id="i1" >  <div>    <input name="name"/>    <a>a</a>  </div>  <a>b</a>  <input name="name"/>  <a>c</a>  <a>d</a></div>> $('input + a')< [<a>​a​</a>​, <a>​c​</a>​]

 prev ~ siblings(查找同级下面所有)

<div id="i1" >  <div>    <input name="name"/>    <a>a</a>  </div>  <a>b</a>  <input name="name"/>  <a>c</a>  <a>d</a></div>> $('input ~ a')< [<a>​a​</a>​, <a>​c​</a>​, <a>​d​</a>​]

三、基本筛选器

操作html文件:

<ul>  <li>list item 1</li>  <li>list item 2</li>  <li>list item 3</li>  <li>list item 4</li>  <li>list item 5</li></ul>

① :first(获取匹配的第一个元素)

> $('ul li:first')< [<li>​list item 1​</li>​]

:last(获取匹配的最后一个元素)

> $('ul li:last')< [<li>​list item 5​</li>​]

:eq(匹配一个给定索引值的元素)

> $('ul li:eq(1)')< [<li>​list item 2​</li>​]

④ :gt(匹配所有大于给定索引值的元素)

> $('ul li:gt(2)')< [<li>​list item 4​</li>​, <li>​list item 5​</li>​]

⑤ :lt (匹配所有小于给定索引值的元素)

> $('ul li:lt(2)')< [<li>​list item 1​</li>​, <li>​list item 2​</li>​]

其他

:not(selector)  去除所有与给定选择器匹配的元素:even         匹配所有索引值为偶数的元素,从 0 开始计:odd          匹配所有索引值为奇数的元素,从 0 开始计数:lang(language) 选择指定语言的所有元素:header       匹配如 h1, h2, h3之类的标题元素:animated      匹配所有正在执行动画效果的元素:focus         匹配当前获取焦点的元素:root          选择该文档的根元素:targe         选择由文档URI的格式化识别码表示的目标元素

更多...

四、属性选择器

① [attribute](匹配包含给定属性的元素)

<div >  <div James="123">123</div>  <div James="456">456</div></div>> $('div[James]')< [<div james=​"123">​123​</div>​, <div james=​"456">​456​</div>​]

 [attribute=value](匹配给定的属性是某个特定值的元素)

<div >  <div James="123">123</div>  <div James="456">456</div></div>> $('div[James="456"]')< [<div james=​"456">​456​</div>​]

其他

[attribute!=value]  匹配所有不含有指定的属性,或者属性不等于特定值的元素[attribute^=value]  匹配给定的属性是以某些值开始的元素[attribute$=value]  匹配给定的属性是以某些值结尾的元素[attribute*=value]  匹配给定的属性是以包含某些值的元素[selector1][selector2][selectorN]  复合属性选择器,需要同时满足多个条件时使用

更多...

五、表单选择器

操作html文件:

<form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button></form>

form.html

① :input(匹配所有 input, textarea, select 和 button 元素)

> $(':input')< [<input type=​"text">​, <input type=​"checkbox">​, <input type=​"radio">​, <input type=​"image">​, <input type=​"file">​, <input type=​"submit">​, <input type=​"reset">​, <input type=​"password">​, <input type=​"button">​, <select>​…​</select>​, <textarea>​</textarea>​, <button>​</button>​]

② :text(匹配所有的单行文本框)

> $(':text')< [<input type=​"text">​]

③ :password(匹配所有密码框)

> $(':password')< [<input type=​"password">​]

④ :radio(匹配所有单选按钮)

> $(':radio')< [<input type=​"radio">​]

⑤ :checkbox(匹配所有复选框)

> $(':checkbox')< [<input type=​"checkbox">​]

⑥ :submit(匹配所有提交按钮)

> (':submit')< [<input type=​"submit">​, <button>​</button>​]

⑦ :image(匹配所有图像域)

> $(':image')< [<input type=​"image">​]

⑧ :reset(匹配所有重置按钮)

> $(':reset')< [<input type=​"reset">​]

⑨ :button(匹配所有按钮)

(':button')[<input type=​"button">​, <button>​</button>​]

 :file(匹配所有文件域)

> $(':file')< [<input type=​"file">​]

六、表单对象属性

 :enabled(匹配所有可编辑元素)

<form> <input name="email" disabled="disabled" /> <input name="id" /></form>> $("input:enabled")< [<input name="id" />]

② :disabled(匹配所有不可编辑元素)

<form> <input name="email" disabled="disabled" /> <input name="id" /></form>> $("input:disabled")< [<input name="email" disabled="disabled" />]

③ :checked(匹配所有选中的被选中元素)

<form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /></form>> $("input:checked")< [<input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />]

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

<select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option></select>> $("select option:selected")< [<option value="2" selected="selected">Gardens</option>]

 

  

 

 

  

 

 

  

 

  

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

参考文档-》》jQuery API 中文在线手册