代码使用方法:
简介
jQuery可以像CSS一样选择页面内的元素。比如:$('p')会选中所有的段落。
使用$(document).ready()就可以添加文档载入完毕之后执行的代码。
使用$.fn.func = function(){}的方式可以扩展jQuery。
选择器
简单示例:
<script type="text/JavaScript"> $(document).ready(function(){ //选中所有的段落: $('p').css('color','red'); //选中设置了title属性的段落: $('p[title]').css('color','blue'); //选中href属性中包含bbs的段落: $('a[href*=bbs]').css('fontWeight','bold'); //选中,含有链接的li元素 $('li:has(a)').css('border','1px solid black'); //选中作为第一个子节点的p元素: $('p:first-child').css('backgroundColor','pink'); //选中可见的p元素 $('p:visible').css('fontSize','20px'); }); </script>
属性选择器
p[title]
只选择设置了title属性的p元素。
p[title=foo]title
title属性等于foo的。
p[title^=foo]
title属性以foo开头的。
p[title$=foo]
title属性以foo结束的。
p[title*=foo]
title属性含有foo的。
例如:
$('p[title]').css('color','blue');
选中了设置title属性的p,并且将其颜色设置为blue。
包含选择器
li:has(a)
表示含有a的li元素。
例如:
$('li:has(a)').css('border','1px solid black');
选中含有a的里元素,并且设置其style的border属性。
位置选择器
p:first-child
选中作为第一个子元素的p元素。
例如:
$('p:first-child').css('backgroundColor','pink');
类似的还有
p:nth-child(n)
例如:
$('p:nth-child(3)').css('backgroundColor','yellow');
选中第三段。
这些表示子节点位置的都是从1开始计数的。
:odd
选中位置排序是奇数的元素。
even
选择偶数位置的元素。
eq(n)
选中第n个元素。
这些都是从0开始计数的。
以上为书上的分类方式。
所有选择器
按照官方的选择器分类,而不是书上的表。
基本选择器:
-
#id
-
element
-
.class
-
*
-
selector1, selector2, selectorN
层次选择器:
-
ancestor descendant
div p选中p,且p必须在div中。可以是隔代的关系
-
parent > child
div>p选中p,且p必须是div的子元素,不包括隔代。
-
prev + next
div+p紧跟着div的p
-
prev ~ siblings
div~p选中p,且p前面必须是div。
基本过滤器:
-
:first
p:first匹配第一个p元素
-
:last
p:last匹配最后一个p元素
-
:not(selector)
过滤掉selector选中的元素
-
:even
偶数元素,0开始的索引。
-
:odd
奇数元素,0开始的索引。
-
:eq(index)
根据index返回一个元素。
-
:gt(index)
索引大于index的元素。
-
:lt(index)
索引小于index的元素。
-
:header
标题元素,h1到h6。
-
:animated
当前正在动画状态的元素。
内容过滤器:
-
:contains(text)
匹配文本中包含text的元素。
-
:empty
匹配没有任何子节点的元素。(有文本节点算作有节点)
-
:has(selector)
在selector匹配的元素中,至少要包含一个才可以匹配。
-
:parent
匹配所有作为父元素的元素。
可见性过滤器:
-
:hidden
所有可见元素
-
:visible
匹配所有不可见元素。
属性过滤器:
-
[attribute]
设置了指定属性的元素。
-
[attribute=value]
属性attribute的值等于value
-
[attribute!=value]
属性attribute的值不等于value,或者没有指定该属性。
-
[attribute^=value]
属性attribute的值以value开始。
-
[attribute$=value]
属性attribute的值以value结束。
-
[attribute*=value]
属性attribute的值含有value。
-
[attributeFilter1][attributeFilter2][attributeFilterN]
匹配满足所有属性过滤器的元素。
子节点过滤器:
-
:nth-child(index/even/odd/equation)
匹配元素是它们父亲元素的第n个子节点、或者是奇数偶数节点。
-
:first-child
作为第一个子节点的元素。
-
:last-child
作为最后一个子节点的元素。
-
:only-child
作为唯一的子节点的元素。
表单选择器:
-
:input
匹配input, textarea, select 以及button 元素。
-
:text
-
:password
-
:radio
-
:checkbox
-
:submit
-
:image
-
:reset
-
:button
-
:file
-
:hidden
匹配不可见的元素以及input hidden
表单过滤器:
-
:enabled
-
:disabled
-
:checked
-
:selected
管理选择结果
访问结果长度
$('p').size()
size方法
获取某个元素
$('p')[0]
$('p').get(0)
将结果转换为数组
get方法如果没有参数就会将
var arr = $('p').get()
取得当前节点的索引
$('#foo').index($('div'))
取得id为foo的div在所有div内的索引。
向结果中添加元素
$('p').add('a').fadeOut().fadeIn();
和$('p,a').fadeOut().fadeIn();是完全等同的。
从结果中删除元素
$('div').not('#foo').fadeOut().fadeIn();
从$('div')中去掉'#foo'。
注意not不再接受标签。不能写not('div#foo')
从结果中过滤元素
$('div').filter('#foo').fadeOut().fadeIn();
从div中再过滤一遍id等于foo的。再如:
$('p').filter('[title]').fadeOut().fadeIn();
filter与not一样不再接受标签,而且过滤的时候没有=只有^=、*=、$=。filter中也可以使用函数过滤器,返回true的选中。
$('div').filter(function(){ return true})
极端情况:
$('div').filter(function(){ return false}).fadeOut().fadeIn();
一个也不选中。
$('div').filter(function(){ return true}).fadeOut().fadeIn();
全部选中。
在结果范围内寻找元素
$('ul').find('a').fadeOut().fadeIn();
在ul的范围内再寻找a。
jQuery链
end方法
返回上一层操作的元素。
$('div').find('a').end().fadeOut().fadeIn();
end又回到了$('div')。
andSelf方法
$('div').find('a').andSelf().fadeOut().fadeIn();
包含$('div')以及.find('a')的结果。
操作元素
each方法
each方法可以遍历所有的选中的元素,并且使用一个函数来对其进行操作。
$('p').each(function(index){$(this).prepend(index+'.')});
选中所有的p,并且在前面加上索引号。
属性
使用attr访问和设置元素的属性。
var test = $('p[title]').attr('title');
获得了title属性的值。当传递两个参数的时候可以设置属性。
$('p[title]').attr('title','jQuery');
将title属性设置为'jQuery'。
$('a[href^=http://]').attr('target','_blank');
外部链接在新窗口打开。
removeAttr删除属性
$('p[title]').removeAttr('title');
删除了title属性。
CSS样式
直接使用css来设置CSS属性。
$('p').css('color','green')
addClass添加类名。
removeClass删除类名。
toggleClass切换类名。
元素内容
html()访问innerHTML
html(content)设置innerHTML
text()访问文本。
text(content)设置文本。
书上的例子,非常巧妙:
$('li').click(function(){var temp = $(this).html(); $(this).text(temp);})
点击就显示源代码。
操作元素
append
给元素末尾添加一个子节点。除了可以添加DOM节点之外,还可以这么写:
$('p').append('<a href="http://bbs.blueidea.com">经典论坛</a>')
如果append的目标只有一个,那么就和DOM操作的时候一样,已经在文档内的会被移动。如果目标是多个,那么是采用复制的方式。
appendTo
将元素添加到别的元素中作为尾部子节点。
prepend
给元素头部添加一个子节点。
prependTo
将元素添加到别的元素中作为头部子节点。
before、after
分别将元素插入到其它节点的前面或者后面。
remove
删除节点。
empty
清空一个节点。
clone
复制一个节点。
表单
val获取或者是设置表单域的值。
事件
bind
绑定事件响应函数。
$('p').bind('click',function(){$(this).prepend('<strong>Clicked!</strong>');});
每当点击p元素的时候就在前面加一段文字。
也可以直接使用事件名,比如click等等:
$('p').click(function(){$(this).prepend('<strong>Clicked!</strong>');});
等效上面的代码。
one
只执行一次的事件响应函数。
unbind
unbind不带参数会删除所有时间响应函数。
$('p').unbind('click')则只删除指定事件的时间响应函数。
$('p').unbind('click',func)则只删除指定的func函数。
事件对象
事件对象统一以函数第一个参数的形式被传入事件响应函数。
trigger
模拟事件触发
$('p').trigger('click');
会触发所有p元素的click事件。
toggle
事件响应函数的切换
function func1(){ $(this).prepend('func1');}
function func2(){ $(this).prepend('func2');}
$('p').toggle(func1,func2);
hover
鼠标经过的效果
function func1(){ $(this).prepend('func1');}
function func2(){ $(this).prepend('func2');}
$('p').hover(func1,func2);
效果
show
显示,语法:show(duration,callback),例如:
$('p').show(3000)
hide
隐藏,如上。
fadeIn、fadeOut
渐显和渐隐效果。
fadeTo(duration,opacity,callback)
到指定的opacity。例如:
$('p').fadeTo(2000,0.5)
在两秒之内变化到0.5。
slideUp、slideDown、slideToggle
滑动显示,隐藏,切换。例如:
$('p').slideUp(2000)
$('p').slideDown(2000)
animate(params,duration,easing,callback)
自定义动画
params是对象,属性就是所有要变换的CSS属性。
分享到:
相关推荐
从给定的文件信息中,我们可以提炼出关于jQuery的一些核心知识点和使用技巧,这将帮助初学者和进阶用户更好地理解和应用jQuery库。 ### jQuery简介与安装 jQuery是一款流行的JavaScript库,它简化了HTML文档遍历、...
完整Jquery笔记总结,xmind思维导图文档,可以下载查看。
### jQuery 笔记详解 #### 一、简介 jQuery 是一款快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。它极大地提高了开发者编写 JavaScript 代码的效率,并且兼容各种...
jQuery笔记(上)涵盖了jQuery的基本用法,包括引入jQuery库、选择器的使用、事件监听与处理,以及简单的动态效果实现。这些基础知识为后续深入学习jQuery提供了坚实的基础。通过学习和实践,开发者可以更加高效地...
jquery 选择器 jquery 是一个快速简单的javascript library 简化了html文件 ,动画,ajax 。方便了网页技术的快速发展
《锋利的jQuery笔记》是一份深入探讨jQuery库的宝贵资料,它主要针对JavaScript开发者,尤其是那些希望提升jQuery技能的人员。jQuery是一个轻量级、高性能的JavaScript库,它的核心功能在于简化HTML文档遍历、事件...
这个“jquery笔记.rar”文件很可能是对jQuery库的深入学习和实践总结。 **DOM操作** 1. **选择器**: jQuery提供了一套强大的选择器,如ID选择器(#id)、类选择器(.class)和元素选择器(element),以及组合选择...
首先,我们来看看"韩顺平AJAX和jQuery笔记整理.doc"。AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,而jQuery对AJAX提供了出色的封装,使得异步数据交换变得更加简单。在这个文档中,你将了解...
《圣思园 jQuery 笔记详解》 jQuery,作为一款强大的JavaScript库,它的出现极大地简化了JavaScript的DOM操作,使得网页动态化和交互性开发变得更加便捷。本文将深入探讨jQuery的选择器、过滤选择器及其在实际应用...
jquery笔记,电脑里存放很久了,也不知道是什么时候的,希望对学习jquery的同学有帮助
《jQuery笔记详解》 jQuery,作为JavaScript的一个库,极大地简化了DOM操作,提升了开发者的工作效率。它将常用的功能进行了封装,形成了一系列API,使得开发者无需关注底层实现,只需调用相应的方法即可实现复杂...
《jQuery学习笔记详解》 jQuery 是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验,涵盖了基础到进阶的知识点,旨在帮助初学者快速掌握...
### 韩顺平AJAX和jQuery笔记整理 #### AJAX概览 - **定义**:Asynchronous JavaScript and XML(异步JavaScript与XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 - **运行原理**: - ...
JS-Ajax-jQuery笔记,学习笔记,JavaScript,JS-Ajax-jQuery笔记,学习笔记,JavaScript,
在本篇jQuery笔记中,我们将深入探讨购物车案例的实现,这个案例主要涉及前端开发中的交互设计和数据管理。购物车是电商网站的核心功能之一,它涉及到商品的添加、删除、数量调整等操作,同时也需要实时更新总价。...