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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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 中文在线手册
原标题:Python开发【前端】:jQuery
关键词:jquery