jQuery学习1

学习jQuery的过程中发现了一个博客把jquery的要点整理的很不错,摘抄其精华以备学习。感谢:http://blog.csdn.net/wph_1129/article/details/5993290

1,jQuery 对象访问

each(callback)  类似于C#中的foreach循环。

$("Element”).length   某个对象在html页面中的个数。

$( "Element ”).size()    某个对象在html页面中的个数。

$( "Element”).get()  获取某个元素在html页面的集合,以数组形式构建。

$( "Element”).get(index)   获取index下标的元素。索引从0开始。

$( "Element”).get().reverse()  反转数组内的元素。

$( "Element”).index($(“ Element”))  获取index中元素在所在匹配对象元素的索引值。

2,JQuery 选择器

$(" * ")    表示选取所有的对象。

$("#element “)   表示选取ID为 element的元素。  id=

$(" .abc “)   表示选取使用abc这个类样式的元素。  class=

$("div “)    表示选取html中的所有div元素 。    ElementName=

$("#a,.b,P“)  表示获取ID是a ,或使用类样式b,或所有p元素。组合关系(或)。

$("#a  .b  P“)  表示获取ID是a 的元素,且包含的使用了样式b 的所有p元素。层级关系。(且)

3,jQuery速成 - 层级对象获取

$("Element1  Element2  Element3  Element4 Element2……")  表示获取层级的元素  前者父级 后者子级

$(" div > input”) 获取div下的所有 input标签元素

$(" div + input”)  表示匹配紧跟在div元素后面的一个p标签元素

$("div ~ p ")   表示匹配在div元素后面的所有P元素

$("Element:first")  表示html页面中某种标签元素的第一个。

$("Element:last")  表示html页面中某种标签元素的最后一个。

$("Element:not(selector)") 去除所有的与给定的选择器匹配的元素。示例:$("input:not(:checked)")表示选择所有没有选中的复选框。

$("Elemnt:even")  表示获得偶数行,从0开始计数。

$("Elemnt:odd")  表示获得奇数行,从0开始计数。

$("Element:eq(index)")  匹配一个给定索引值的元素,索引从0开始。示例:$("div:eq(3)") 获取页面的第4个div

$("Element:gt(index)") 匹配所有大于给定索引值的标签元素  不包含给定索引值的元素    索引从0开始

$("Element:It(index)") 匹配所有小于给定索引值的标签元素   不包含给定索引值的元素    索引从0开始

$(":header")  表示匹配h1 h2 h3 之类的元素。

$("Element:animated")     表示匹配所有没有在执行动画效果中的元素

4,jQuery速成 - 内容对象的获取和对象可见性

$(" Element:contains(text)")   表示匹配标签元素中的文本是否包含某个字母或者字符串。

$("Element:empty")  表示获得元素不包含文本或子元素。

$("Element:parent")  表示获得对象元素包含文本或子元素。

$("Element:has(selector)")   表示匹配某个元素是否包含某个元素。示例$("p:has(span)") 表示包含span元素的所有p元素

$("Element:hidden")     表示匹配所有不可见元素。  包括display:none   input  type=hidden

$("Element:visible")  表示匹配所有可见元素。

5,jQuery速成 - 对象获取进阶

$("Element[id]") 表示获取所有带有ID属性的标签元素。

$("Element[attribute = ko]")  表示获取所有某个属性值为ko的元素。

$("Element[attribute != ko]")  表示获取所有某个属性值不为ko的元素。

$("Element[attribute ^= ko]")  表示获取所有某个属性值以ko开头的元素。

$("Element[attribute $= ko]")  表示获取所有某个属性值以ko结尾的元素。

$("Element[attribute *= ko]")  表示获取所有某个属性值包含ko的元素。

$("Element[selector1][selector2][……]") 表示符合属性选择器,示例$("input[id][name][value=ko]")表示获得带有ID、Name以及value是Ko的input元素。

6,jQuery速成 - 子元素的获取

$("Element:nth-child(index)") 
选择父级下的第N个子级元素,索引从1开始,而eq函数(eq函数会在后面学习到)从0开始。 
:nth-child(even)偶数 
:nth-child(odd)奇数 
:nth-child(3n)表达式 
:nth-child(2)索引 
:nth-child(3n+1)表达式 
:nth-child(3n+2)表达式

$("Element:first-child")   表示匹配父级下的第一个子级元素。

$("Element:last-child")   表示匹配父级下的最后一个子级元素。

$("Element:only-child")   表示匹配父级下的唯一个子级元素   示例:dt在dl列表中唯一,那么将选择dt。

7,jQuery速成 - 表单对象的获取

$(":input”) 表示匹配Input元素类型为 input  button select  textarea

$(”:text”)  表示匹配所有单行文本框

$(":password”)  表示匹配所有密码框

$(":radio")  表示匹配所有单选按钮

$(":checkbox")  表示匹配所有复选框

$(":submit")  表示匹配所有提交按钮

$(":reset")  表示匹配所有重置按钮

$(":button")  表示匹配所有按钮

$(":file")  表示匹配所有文件上传域

$(":hidden")  表示匹配所有不可见元素或者type值为hidden的元素

$(":enabled")  表示匹配所有可用的input元素  示例:radio:enabled表示匹配所有可用的单选按钮

$(":disabled")   表示匹配所有不可用的input元素。

$(":checked")  表示匹配所有选中的复选框元素。

$(":selected")  匹配所有的下拉列表。

8,jQuery速成 - 元素属性的设置与移除。

$("Element").attr(name) 表示获取第一个匹配元素的属性值。

$("Element").attr(key,value)  表示为某一元素设置属性的值。

$("Element").attr({key:value,key,value,....}) 表示为某一元素一次性设置多个值的值 。

$("Element").attr(key,function) 表示为所有匹配的元素设置一个计算的属性值。

$("Element").removeAttr(name) 表示移除某一个属性。

9,jQuery速成 - 过滤

$("Element”).eq(index)   表示获取第n个元素。 index从0算起。$("div”).eq(3) 获取html页面中的第6个div元素

$("Element”).hasClass(“className”)  检查当前元素是否有某个特定的类,如果有返回true。

$("Element”).filter(“Expression1, Expression2, Expression3,……”)   表示刷选出与指定表达式匹配的元素集合。

$("Element”).filter(“function”) 使用同上

$("Element”).is(“Expression”)  表示使用表达式检查元素集合,只要有一个符合的就返回true。

$("Element”).map(“callback”)  将一组元素转换成其他数组。

$("Element”).not(“Expression”)  删除与指定表达式匹配的元素。

$("Element”).slice(start,end)   开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起。end (Integer) : (可选) 结束选取自己的位置,如果不指定,则就是本身的结尾。

10,jQuery速成 - 查找

$("Element”).add(“Expressions”) 把与表达式匹配的元素添加到JQuery对象中。

$("Element”).children(“Expressions”)  表示通过可选的表达式过滤所匹配的子元素。parents将查找所有祖辈元素。children()只考虑所有后代元素。

$("Element”).contents()  表示获取某个元素的子元素内容。

$("Element”).find(“Expressions”)  表示搜索某个元素下面的子元素。 示例 $("div").find("p")等同于$("div p")

$("Element”).next(“Expressions”)  表示获取某个元素后面的同一层的所有元素。

$("Element”).nextAll(“Expressions”)  表示查找当前元素后的所有元素,可用表达式过滤。

$("Element”).prev(“Expressions”)  表示获取一个包含匹配的元素集合中每一个元素紧邻的同一层的元素集合。

$("Element”).parent(“Expressions”)  表示获取包含着所有匹配元素的唯一父元素的元素集合。

$("Element”).parents(“Expressions”)  表示获取一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

$("Element").siblings("Expressions")  查找当前元素之前所有的同层元素,可以用表达式过滤。

11,jQuery速成 - 内部插入

$("Element").append(“content”)  表示像元素中追加内容。

$("Element").appendTo(“content”) 表示将选中的内容追加到另外一个元素内部。相当于颠倒$("Element").append(“content”)

$("Element").prepend(“content”)  向选中的元素中追加内容 并前置。

$("Element").prependTo(“content”)   将选中的元素追加到另外一个元素内部并前置。相当于颠倒$("Element").prepend(“content”)

12,jQuery速成 - 外部插入

$("Element").after(“content”)  表示向选中的元素后面添加内容。

$("Element").before(“content”)  表示向选中的元素前面添加内容。

$("Element").insertAfter(“content”)  把选中的元素插到内容后面 颠倒了$("Element").after(“content”)

$("Element").insertBefore(“content”)  把选中的元素插到内容前面 颠倒了$("Element").before(“content”)

13,jQuery速成 - 包裹

$("Element").wrap("html")  表示把所匹配的元素分别用其他元素的结构化标记包围起来。示例:$("p").wrap(“") 或 $("p").wrap(“")

$("Element").wrap("elem")  同上  示例:$("p").wrap($(“#Element"))

$("Element").wrapAll("html") 表示将所有匹配的元素用单个元素包裹起来 示例:$("p").wrapAll("")便会将所有的p使用一个div包裹起来

$("Element").wrapAll("elem")   同上。

$("Element").wrapInner("html")   表示将每一个匹配的元素的子内容(包括文本也属于子元素)用一个HTML结构包裹起来 示例:$("p").wrapInner("")

$("Element").wrapInner("elem") 同上

14,jQuery速成 - 替换,删除和复制

替换

$("Element"). replaceWith(“contet”)  表示将所有匹配的元素替换成指定的HTML或Dom元素。

$("Element").replaceAll("selector")   表示用匹配的元素替换掉所有selector匹配到的元素。

删除

$("Element").empty()  表示删除匹配元素中的所有子节点。(文本也属于子节点)。

$("Element").remove(“Expressions”)  表示从DOM中删除匹配的元素。

复制

$("Element").clone()  表示复制匹配的DOM元素  并且选中这些克隆的副本。

$("Element").clone(“true”)  表示元素以及其所有的事件处理并且选中这些克隆的副本。比如某个按钮带有事件,他将自己复制后,事件也可以复制。

15,jQuery速成 - 元素的赋值

HTML

$("Element").HTML()   表示获取指定元素的HTML代码

$("Element").HTML(“val”)   表示设置指定元素的HTML代码。(HTML代码和平时body中的一样)

文本

$("Element").text()   表示获取指定标签元素中显示的文字

$("Element").text(“val”)   表示设置指定标签元素内容

$("Element").val() 获得input的值check ,select , radio等都能获取

$("Element").HTML(“val”) 设置指定的input的值。

16,jQuery速成 - 样式的设置与定义

$("Element").addClass(“class”)   表示为获得的元素添加某个定义好的类样式。

$("Element").removeClass(“class”)   表示为获得的元素移除已经是使用的类样式。

$("Element").toggleClass(“class”)   表示当获取的元素使用了某定义好的样式就移除样式,没有使用,就添加样式。

$("Element").css(“name”)  表示获取某个元素的css样式。示例:$("div").css(“color”)  表示获取div的颜色。

$("Element").css(name,value)  表示为获取的元素的css样式属性赋值。

$("Element").css({name:”value”,name:”value”,name:”value”,……})  表示为获取的元素的多个css样式属性赋值。

$("Element").offset()   表示返回元素的整型属性,分别为top 和left。

$("Element").width()    表示获取某个元素的宽度。

$("Element").width(“val”)   表示设置获取元素的宽度。

$("Element").height()    表示获取某个元素的高度。

$("Element").width(“val”)   表示设置获取元素的高度。

以上是基础部分的要点总结,下面链接主要讲了jQuery中的事件机制:http://blog.csdn.net/wph_1129/article/details/5993290

再次感谢作者。

时间: 2024-10-05 18:23:01

jQuery学习1的相关文章

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jquery学习(一)

简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 首先一定要注意的是引入的路径 按照案例写一个简单的DEMO <%@ page language="java" contentType="text/html; charset=UT

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习总结(一)

jQuery学习完了,但是感觉知识点很杂,想JavaScript一样,所以还是总结一下比较好. 1.DOCTYPE 在每次的html页面前都会有这样一句话,那么它有什么作用呢? DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档.也就是告知浏览器的渲染显示方式. 2.新的方法--专属jQuery (1)$()方法: 可以通过$()方法来获得页面的指定节点,参数是某种CSS的选择器. var userN

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

jQuery学习-------jQuery选择器

基本选择器: id选择器:$("#id") 标签选择器:$("tag") 类选择器:$(".classname") 通配选择器:$("*") 组选择器:$("selector1,selector2,...,selectorN") 层次选择器: 包含选择器:$("ancestor descendant") 子选择器:$("parent>child") 相邻选择器:

jQuery学习示例------点击红色方块实现左右晃动

<!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javas

jQuery学习--------jQuery过滤器

each() 方法规定为每个匹配元素规定运行的函数. 过滤: 下标过滤: eq(index) //获取第index个元素 类过滤: hasClass(class)  //检查当前元素是否含有某个特定的类,如果有,返回true 例如:$("div").hasClass("div1") //含有div1类的div元素 表达式过滤: filter(expr)  //筛选出与指定表达式expr匹配的元素集合,用逗号分隔多个表达式 filter(fn)    //筛选出与指定

jQuery学习笔记--JqGrid相关操作 方法列表(上)

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个