Jquery学习1
来源:互联网 发布:电子券怎么在淘宝使用 编辑:程序博客网 时间:2024/06/06 03:00
1.什么是JQuery
JQuery是一个可以简化JavaScript编程的JavaScript库。
2.JQuery可以做什么
jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
3.知识准备
在学习JQuery之前,我们需要具备HTML、CSS、JavaScript知识
4.使用JQuery
4.1 JQuery的安装
前面我们说到JQuery是一个可以简化JavaScript编程的JavaScript库,所以在我们使用JQuery之前,我们需要引入JQuery的库,引入JQuery的库有两种方法:
1.从网上下载JQuery的库,添加到我们的项目中,在使用JQuery的页面中引入
2.使用Google或微软的CDN来引入
推荐使用第二种方法,因为使用CDN可以提高网站的响应速度,给用户更好的访问速度体验。
4.2 JQuery的语法
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
$(this):代表当前HTML元素
在使用JQuery操作HTML元素时,我们往往需要加上$(document).ready(function{.......});,因为如果在文档加载之前执行JQuery操作可能会失败
4.3 JQuery的选择器
4.3.1 JQuery的元素选择器
JQuery使用CSS选择器来选取HTML元素。
$("p"):选取<p>元素
$("p.intro"):选取所有class="intro"的<p>元素
$("p#demo"):选取所有id="demo"的<p>元素
4.3.2 JQuery的属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
4.3.3 JQuery的CSS选择器
JQueryCSS选择器可用于改变HTML元素的CSS属性
4.4 JQuery的事件
4.5 JQuery的效果
4.5.1 隐藏与显示效果
hide()和show()
toggle()
4.5.2 淡入淡出效果
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
4.5.3 滑动效果
slideDown()
slideUp()
slideToggle()
4.5.4 动画
animate()
4.5.5 JQuery stop()
stop():停止滑动或者动画
4.5.6 JQuery Callback
4.5.7 JQuery Chaining
4.6 JQuery&&HTML
4.6.1 JQuery 获取
获取内容 :
text():设置或获取所选元素的文本内容
html():设置或获取所选元素的文本内容(包含HTML标记)
val():设置或返回表单字段的值
获取属性值:
attr():获取所选元素的属性值
4.6.2 JQuery 设置
4.6.3 JQuery 添加
append():在被选元素的结尾插入内容
prepend():在被选元素的开头插入内容
after():在被选元素之后插入内容
before():在被选元素之前插入内容
4.6.4 JQuery 删除
remove():删除被选元素及其子元素
empty():从被选元素中删除子元素
4.6.5 JQuery CSS类
addClass():向被选元素添加一或多个类
removeClass():向被选元素删除一个或多个类
toggleClass():对被选元素进行添加/删除操作类的切换操作
css():设置或返回样式属性
4.6.6 JQuery css()
4.6.7 JQuery 尺寸
jQuery 提供多个处理尺寸的重要方法:
width():
height():
innerWidth():
innerHeight():
outerWidth():
outerHeight():
4.7 JQuery遍历
4.7.1 JQuery遍历
4.7.2 JQuery遍历--祖先
向上遍历DOM树:
parent():返回被选元素的直接父元素
parents():返回被选元素的所有祖宗元素,也可通过带参数的方法返回指定的祖宗元素
parentsUntil():返回介于当前元素和指定元素之间的所有祖宗元素
4.7.3 JQuery遍历--后代
向下遍历DOM树
children():返回被选元素的所有直接子元素,也可通过指定参数来获取满足条件的子元素
find():返回被选元素的所有后代元素,直至最后一个后代元素
4.7.4 DOM树中水平遍历
siblings():返回被选元素的所有同胞元素,也可通过指定 参数获取特定的同胞元素
next():返回被选元素的下一个同胞元素
nextAll():返回被选元素的所有跟随同胞元素
nextUntil():返回介于被选元素和指定参数元素之间的所有跟随同胞元素
prev():
prevAll():
prevUntil():
4.7.5 JQuery遍历--过滤
first():返回被选元素的首个元素
last():返回被选元素的最后一个元素
eq():返回被选元素中带有指定索引号的元素
filter():返回被选元素中匹配指定参数的元素
not():返回被选元素中不匹配指定参数的元素
4.8 JQuery--Ajax
Ajax可以与服务器交换数据,可以在不重新加载所有页面的情况下,对部分页面进行刷新。
4.8.1 Ajax简介
Ajax = 异步的JavaScript和XML(Asynchronous Javascript and XML)
4.8.2 JQuery load()方法
load():该方法从服务器加载数据,并将返回的数据放入被选定的元素中
语法:$(selector).load(URL,data,callback)
URL:规定需要加载的URL
data:规定与请求一同发送的查询字符串键/值对集合
callback:load方法完成后执行的函数。
responseTxt:包含调用成功时的结果内容
statusTXT:包含调用的状态
xhr:包含XMLHttpRequest对象
4.8.3 get()和post()方法
用于通过Http get或post请求从服务其请求数据
get请求:从指定的资源请求数据。基本用于从服务器获得数据,有可能返回缓存数据
post请求:向指定的资源提交要处理的数据。可用于从服务器获取数据,但不会缓存数据
$.get():通过Http Get请求从服务器上请求数据
$.get(URL,callback)
URL:希望请求的URL
callback:请求成功后执行的函数名
$.post():通过Http Post请求从服务器上请求数据
$.post(URL,data,callback)
URL:希望请求的URL
data:连同请求发送的数据
callback:请求成功后执行的函数
4.9 noConflict()
避免在同一个项目中使用不同的框架均以$作为简写的情况
$.noConflict();回什邡对$标识符的控制,但释放后jQuery中需使用jQuery代替$,或者创建自己的简写
var jq = $.noConflict();
- jquery学习1---关于jquery
- jquery学习1
- jQuery学习1
- jquery 学习(1)
- jQuery学习笔记1
- jQuery学习1
- jquery 学习历程1
- jquery学习笔记1
- jquery 学习日记1
- jquery 小结学习1
- jQuery 学习—1
- JQuery学习笔记(1)
- JQuery学习(1)
- Jquery学习笔记1
- jquery学习小结1
- jQuery---学习笔记1
- jquery学习笔记-1
- jquery学习(1)
- Segmentation fault (core dumped)
- 20个很棒的android开源项目帮助你提升开发技能
- java验证码程序
- spring QuartZ Cron表达式
- STATIC_DRAW, DYNAMIC_DRAW, STREAM_DRAW的区别
- Jquery学习1
- Idea的使用与感受(二)
- Oracle分页查询
- Android 面试题(一)
- 使用Ultra Librarian生成Cadence Allegro的PCB封装库和OrCAD Capture CIS的原理图库
- 删除项目的SVN信息 取消项目的SVN关联 简单粗暴
- 四旋翼飞行器的控制规律及算法实现
- NewsFragmentTabHost 导航栏
- 最长公共子串 后缀自动机