`

jQuery学习---基础篇

jQuery正则表达式AjaxCSSJavaScript
阅读更多

近期，因项目需要学习了一下jQuery，很久没有碰JS的东西了，原本以为会上手困难，结果仅仅看了jQuery网站上的文档，就能上手。入门已经有jQuery中文入门了。这里主要整理一下jQuery的API特点，便于对其API有个整体印象。

 


个人感觉：

  1. css、xpath，甚至正则表达式的selector让人一看即明。
  2. 在dom和数组操作上的包装和方便的解包操作，几乎无害化的扩展和简化了js代码，write less ,do more。
  3. 简单、一致的api让人领略什么叫融汇贯通、越用越爽，真是大道至简。

 

这里就谈谈jQuery的一些使用心得：

概念:

  • jq = 本文jQuery的缩写
  • $(...) = jq对象，jq对象是个数组，即使对应一个原始对象也是。另外jq对象没有"NullPointerException",调用没有匹配任何DOM元素的jq对象没有任何影响，省却了很多“?”号三元操作符，但调试上会些许麻烦。
  • selector = 选择器/筛选器，匹配一个或多个对象，所以jq对象上操作会影响到选择器匹配的所有对象。 
  • 裁剪   = 匹配的多个对象也许你要用到其中一个，可以用.eq(i)裁剪到此对象进行操作（裁剪回来的仍然是jq对象）。
  • 原始对象 = jq包装过后的对象不能直接使用原始对象的方法和属性，需要还原成原始对象，调用$(..).get()或者$(..).get(0)或者$(..)[0]（用什么方式自己喜欢即可，初学者一般喜欢用get(0),我也是个初学者，或者是写惯Java的缘故.....）.假如$(...)匹配多个对象，[0]则返回第一个，而 $(..).get()返回值是数组，即是只有一个对象，$(..).get(i)返回第i个,返回的对象不能直接使用jq方法，要使用的话要用$(原始对象)再包装.
  • get/set = jq没有get/set写法，一种方法一个参数就是get,两个参数（前名后值）就是set。 get操作通常只针对jq所匹配的第一个元素，而set操作则针对jq匹配的所有元素。
  • 事件触发和事件绑定 = jq没有onclick这类写法，对于一个事件 如click，不带参数的事件方法就是触发事件 如click() ，而带有事件处理函数参数的，则是绑定事件，如click(function(e){.....})。
  • 回调 = jq的代码的主要使用方式就是回调，遍历、事件等操作大多数都是回调完成的。回调方法里的this引用通常都是指向当前处理的对象或者数组元素，这点很重要，用好了才能体会jq所带来的好处。
  • “链式操作” = jq的很多方法返回值是个jq对象，所以可以继续用jq方法进行操作，看起来就像个链条一样，需要注意的是返回的jq对象和之前的jq对象有可能所代表的元素集合是不一样的，这点要做到心里有数。
  • queue =  队列，即当前jq对象正在执行的系列函数或动作，通常只有在长时间（如效果和动画）的动作或者前后依赖的动作中用到，因为瞬间完成的方法，你根本没下手机会。

API概览：

  • Core:

jq的核心方法，包括jq对象的创建（$(对象or Selector)），遍历操作（$(..).each），裁剪（$(..).eq(i),i 为0~length-1）.数据绑定和获取（data方法），队列（queue方法），插件（$.fn.extend /$.extend）,兼容其他js框架（.noConflict，几个js框架都用到了"美元"，可以用此方法"卸载"$，那jq只能使用jQuery(...)全称替代美元符号）。

  • Selectors:

DOM选择器，以多种方式匹配过滤一个或多个html元素,可以说jq的精华之一。 结合css,xpath,正则表达式等筛选"语法"的优点。

实用性原则：能快速定位特定元素集，命中所需filter不超过3个。

常用的几个匹配方式：

  1. #id  匹配单个ID 对象,如有多个只匹配第一个，特点：精确，但是不能太多，ID多记忆麻烦哦。 
     例子：$("#id1")，获得匹配第一个id1的对象匹配。
  2. element 元素名匹配，匹配同类HTML元素，特点：匹配范围广，通常和属性筛选（Attribute Filter）结合使用，能用两个filter精确命中。
    例子$("div")匹配所有DIV元素。$("div[name='message']")匹配所有name为message的div
  3. .class 样式匹配,特点：在样式变化中经常会用到，经常结合each操作使用，缺点：难用度和样式多寡正相关。 
    例子$(".class1")配备样式class为class1的所有元素。
  4. 位置筛选 我自己给此类的统称，便于记忆。基本上是按元素的位置来匹配选取一群元素。
          以下两个实用价值较大，通过DIV和SPAN结合可以用来控制input和按钮：

     

                ancestor descendant  "父"下面的所有"子"(不管第几层)
                注意此处ancestor descendant 表示的是父子过滤器，而不仅仅是HTML元素。

     

                parent > child "父"下面的直接"子"元素(只匹配直接子类)
                parent 和child也是过滤器。

     

                下面的例子较好理解。

                 

    <script language="javascript">
  $(document).ready(function(e){
	alert($("#buttons :button").length);
	alert($("#buttons > :button").length);
  }
</script>
<body>
<div id="buttons">
	<button>button1</button>
	<input type="button" value="button2" />
	<div id="childLayer">
		<button>button3</button>
	</div>
</div>
</body>

     

           另外两个实用性较小： 
                 prev + next 紧跟（前个匹配的每个元素后面紧跟的元素） 
                 prev ~ siblings 紧随（前个匹配的每个元素后面紧随的一串元素，直到父元素结束）

  5. 内容筛选（Content Filter）：匹配范围太广，筛选性太弱，实用性不大。
  6. 可视性筛选（Visibility Filter）：在样式变换中较为有用。
  7. 属性筛选（Attribute Filter）：重要的筛选器，通常结合其他筛选器精确定位元素和元素集合，可以支持自定义属性 例如$("div[group='g1']"),匹配西面的所有带有group="g1"的div: 
    <div group="g1">
</div>
<div group="g2">
</div>
<div group="g1">
</div>
<div group="g2">
</div>
    类型：

    [attribute] 具有属性attribute
    [attribute=value] 属性值等于value
    [attribute!=value] 属性值不等于value
    [attribute^=value] 属性值以value开头（来源于正则表达式）比较有用，可以定义一组前缀可以统一管理。
    [attribute$=value] 属性值以value结尾（来源于正则表达式）
    [attribute*=value] 属性值包含value，无论开头结尾还是中间
    [attributeFilter1][attributeFilter2][attributeFilterN] 多重属性过滤,and关系型     
     
    注：jq1.2之前的版本需要在属性前加个"@"
  8. 表单元素筛选（Forms Filter）：用得较多一类筛选器，jq的文档写得很清楚，不累述了。可以和其他selector配合使用。例如：$(":radio[name='r1']:checked").val()会获得选中的r1 radio button的值。
  9. 基础筛选和子元素筛选：重要性较低的筛选，一般较难用上，但复杂的控制又必不可少，鸡肋。。。
    通常和其他selector结合使用较有用的:
    :even 匹配index是偶数的，如0，2，4。在行间间隔色相当好用。
    :odd 匹配index是奇数的，如1，3，5
    :first 匹配前一个selector匹配的第一个元素，返回的是单个元素
    :last 类似:first，只不过是最后一个。
    :first-child 和:first类似，不过返回的是一群元素的第一个子元素，$("div span:first-child"),所有div的第一个子元素，如果是span则匹配，否则不匹配。
    :last-child 同上，不过是最后的子元素。
    :not(selector)  匹配不符合条件的，比较宽泛，结合使用。

    再谈selector之间的关系：

    selector需要配合使用才能发挥最佳效能，所以有必要了解一下selector之间的关系。

    selector1,selector2,.....,selectorN    此处selector 之间是or关系型的，即是匹配每个selector所筛选的元素。

    selector1 selector2    此处ancestor descendant匹配，and关系型的一种，带有隐含关系"父"下面的所有"子" (不管第几层)，其他几个位置筛选的类型类似。

    selector1[attributeFilter1][attributeFilter2]   此处selector和attribute fiter之间的关系是平行的and关系。注意的是selector之间不能有空格，否则变成ancestor descendant
  • Attributes:

设置或批量设置、以及获取 属性、class、HTML(innerHTML)、Text(相当于IE的innerText)、value属性

  • Events:

绑定或批量绑定、解除绑定、触发事件，可以设定只触发一次的事件（one方法）。绑定事件是累加方式所以重新绑定之前需要解除绑定。事件支持名称空间，相同名称空间的一种事件可以一起被操作而不影响其他名称空间的同一种事件，例如：

click.dosomething和click.doothers，解除dosomething名称空间的绑定，不影响到doothers的事件，click可以同时触发两个名称空间的click事件，因为都是click事件。 事件打算在另外的篇幅展开讨论，此处仅仅介绍。

 

注意：对于checkbox和radio的onclick事件，浏览器是先设置checked属性再运行onclick的代码，而jq绑定的click事件假如是由jq的click方法而不是点击鼠标触发的话，会先运行jq绑定的click事件代码再设置checked属性。这一点太诡异了。。。应该算个bug

<SCRIPT LANGUAGE="JavaScript">

$(function(){
	$(":checkbox").click(function(e){
		alert(this.checked);
	});
})

function toggleCheckBox(){
	//document.all("chk1").click();//换过来注释就知道区别
	$(":checkbox").click();
}

 </SCRIPT>



<body>
<input type="checkbox" checked id="chk1"/>
<button onclick="toggleCheckBox();">toggle</button>

</body>

 http://dev.jquery.com/ticket/3827

  • Utilities:

 工具类，常用的是数组的操作（合并，排除，转换，去除重复，indexOf等）、字符串去空格、序列化form或者Object以便ajax发送、对象的扩展。可以参照jq的文档，不会很难，不累述了。

  • Traversing:

 主要是selector匹配的元素集合中再进行查找、过滤、裁剪，在DOM树中前后左右上下范围内的对象进行操作。是selector的延伸方法。不会很难,jq中文入门很多例子，不累述了。

  • Manipulation:

对匹配的元素进行“内容管理”，类似于innerHTML的增删改，对节点的插入删除，并且增加了对特定节点的“包装”方法（在匹配的元素外面加多一层HTML）。不累述了。

  • CSS:

对CSS样式进行调整，获取位置坐标和长宽，移动滚动条，获取滚动条位置等。不累述了

  • Effects:

动画效果操作，配合使用可以做出很多个性化的效果。尚未怎么研究。不累述了

  • Ajax：

Ajax操作。打算在另外的篇幅展开。

  • jQuery UI

另外一个天地。研究过才有发言权。对于我，现在是零。

 

 

分享到：
| 自己收录: 对流关闭的一点认识
评论
1 楼 yiminghe 2009-04-14  
你可以先理解一下 无侵入 的思想
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics