jQuery初级

来源:互联网 发布:微信mac版下载安装 编辑:程序博客网 时间:2024/05/18 03:14

jQuery的功能概括
1.html的元素选取
2.html的元素操作
3.html dom遍历和修改
4.js特效和动画效果
5.css操作
6.html事件操作
7.ajax异步请求方式

一,jquery的选择器操作
()(‘this’) 选取当前html元素
(p.intro)classintrop(‘p:first’) 选取第一个p元素
([href])href(‘:button’) 选取所有type=’button’的元素和按钮元素

二,jquery效果
a.显示与隐藏
hide(speed,callback),show(),toggle()
b.淡入淡出
fadeIn(speed,callback),fadeOut(),fadeToggle(),fadeTo(speed,opacity,callback)
c.滑动
slideDown(speed,callback),slideUp(),slideToggle()
d.动画
animate({params},speed,callback);
PS:默认情况下,所有HTML元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的CSS position属性设置为relative、fixed或absolute!

三、jQuery的HTML,DOM操作
1、获取内容和属性
a.text() 设置或获取所选元素的文本内容
b.html() 设置或获取所选元素的内容(包括HTML标记)
c.val() 设置或获取表单字段的值
d.attr() 获取链接中href的值
PS:也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始的值。然后以函数新值返回您所希望使用的字符串。
2、添加元素
a.append 在被选元素的结尾插入内容
b.prepend 在被选元素的开头插入内容
c.after 在被选元素之后插入内容
d.before 在被选元素之前插入内容
PS:append/prepend与after/before的区别:前者是在被选元素内部嵌入后者在被选元素外面追加。
3、删除元素
a.remove(param) 删除被选元素(及其子元素)
b.empty() 从被选元素中删除子元素
PS:jQuery remove()参数可以接受一个参数,允许删除指定元素
4、操作CSS样式
a.addClass() 向被选元素添加一个或多个类
b.removeClass() 从被选元素删除一个或多个类
c.toggleClass() 对被选元素进行添加/删除类的切换操作
d.css(‘propertyname’,’value’) 设置或返回样式属性
css({”:”,”:”,….}) 设置多个css属性
e.尺寸
width 获取元素的宽度 (不包括内边距、边框和外边距)
height 获取元素的高度(不包括内边距、边框和外边距)
innerWidth 获取元素的宽度(包括内边距)
innerHeight 获取元素的高度(包括内边距)
outerWidth 获取元素的宽度(包括内边距和边框)
outerHeight 获取元素的高度(包括内边距和边框)
这里写图片描述

四、遍历
1。遍历
PS:意为’移动’,用于根据其相对于其他元素的‘查找’(或选取)HTML元素。以某项选择开始,并沿着这个选择移动,直到抵达所需要的元素为止。
2。祖先(向上遍历DOM树)
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素,直到文档的根元素(html)
parentsUntil(param) 返回介于两个给定元素之间的所有祖先元素
3。后代(向下遍历DOM树)
children(param) 返回被选元素的所有直接子元素(PS:该方法只会对下一级DOM树进行遍历) ;也可以使用参数返回指定子元素。
find(param) 返回被选元素的指定的所有后代元素,一直到最后一个后代。
(PS:find(‘*’)返回被选元素的所有后代)。
4。同胞(水平遍历DOM树)
siblings(param) 返回被选元素的所有同胞元素(除自己)[也可使用参数过滤指定元素]。
next() 返回被选元素的下一个同胞元素(该方法只返回一个元素)。
nextAll() 返回被选元素以下所有同胞元素。
nextUntil(param) 返回被选元素与指定参数之间的所有同胞元素。
prev(),prevAll()及prevUntil()与上面类似只不过作用相反而已.
5。过滤
缩小搜索元素的范围,三个最基本的过滤方法:first(),last()和eq(),允许其在一组元素中的位置来选择一个特定的元素。其他过滤方法如filter()和not()允许选取匹配或不匹配某项指定指标的元素。
first()/last() 返回被选元素的首个/最后一个元素
eq(index) 返回被选元素中带有指定索引号的元素(索引号从0开始)
filter(param)/not(param) 返回匹配的/不匹配的所有元素

五、jQuery Ajax(=异步+js+and+xml)
Ajax是一种与服务器交互数据的技术,作用在于不重载全部页面的情况下,实现对部分网页的更新。
1。load(URL,data,callback); 必须的URL参数,
可选大data参数,是同请求一同发送的查询的字符串键/值对集合。
可选的callback参数,是load()方法完成后执行的函数。

 可选的callback参数规定当load()方法完成后所要允许的回调参数,回调函数可以设置不同的参数: responseTxt:包含调用成功时的结果内容 statusTxt:包含调用的状态 xhr:包含XMLHttpRequest对象

2。get()和post()
jquery 的get()和post()方法用于通过HTTP GET或POST请求从服务器请求数据。
GET:从指定的资源请求数据
POST:向指定的资源提交要处理的数据
这里写图片描述
1..get(url,function(data,status));2..post(url,data,function(data,status));

六:JSONP(JSON with Padding)
Jsonp是json的一种使用模式,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么我们从不同的域(网站)访问数据需要一个特殊的技术(Jsonp)呢?这是因为同源策略。同源策略,它是有Netscape提出的一个著名的安全策略,现在所有支持js的浏览器都会使用这个策略。

原创粉丝点击