Jquery1.4.1 学习

Jquery1.4.1 学习

Jquery1.4.1

在工作中也用过好几次jquery了，认识它还是好几年前的时候。但也就是用什么功能就打开api直接查，还没怎么总结过，呵呵，感觉工作中的总结还是有必要的，虽然工作中用过了，但是最后阶段的总结可能比工作中的收获更大、更多。

 

下面就总结下自己常用的功能与体会：

1. 我们要做的第一件事情就是一定要先分清楚jquery对象与dom对象，很简单：Jquery对象的方法在jquery手册中，dom对象的方法去dhtml手册中查找。很高兴在jQuery核心函数中提供了dom对像->jQuery对象的转换，是通过$(element)实现的，element可以是dom对象，也可以是一个jquery对象。
2. $(document).ready(function(){})  ==  $(function(){})
   两者其实是一样的功能，提供页面加载完之后执行某项功能，并且它提供了链接的功能，这意味我们可以把多个函数连接在页面加载完之后执行，如下：
   $(function(){  
           alert('第一次运行');      
   });                       
   $(function(){         
           alert('第二次运行');      
   });
   可window.onload = function(){}, 只会执行最后一次的函数
3. $()方法除了将dom对象转换为jquery对象外，还有几个重载版本
   1) 输入一个表达式查找对象 $(exp, [context]),在context中查找exp表达式代表的对象；
   通常我一般不会指定context，我想jquery给出这个参数的原因是指定它的话效率会好些吧!
   2) 可以直接把一个html字符串传进这个函数构建一个jquery对象
   3) 传入html字符串的同时，并且指定一些属性
      如：$(“<input>”, {type:””}).appenTo(“form”);
4. jQuery对象访问
   通常jQuery方法获取的都是一个集合，用size()方法或者length属性都可以获取集合中的元素个数；each方法可以遍历集合,函数中this指针每次指向一个dom元素，每次还给函数传递一个代表元素在集合中位置的实参，并且我们可以用return false终止循环，return true使循环进行下一次循环；
5. get(), get(index),index();
   get方法从集合中得到相应的dom对象，index方法提供2种方式：
   1）集合在前， 查找元素作为参数
   2）集合作为参数(seletor选择方式)， 查找的元素在前
6. 数据缓存的应用
   在一次项目应用中发现这个方法，感觉很实用，我们平时存储数据的时候要么是把数据存在隐藏域中，要么是赋给某个元素的属性，现在好了，我们一步就可以设置数据缓存，很简单，只需$().data(name);
7. 选择器的应用
   jQuery应该是在选择器的基础上应用的，我们可以通过元素的id， name， tagname等查找元素；我们要做的只是给$()函数传递一个所谓的seletor， 哈哈，学习jQuery时候一部分工作是在学习怎么构建一个合理的seletor来查找我需要的元素；
   Seletor构建：
   基本：
   根据元素id， 类名， 元素名称定位；如果熟悉css的话很能理解jQuery这个seletor的规则，当我们定义css的时候也是这些规则
   #id对单个元素设定       .class(元素name)一类元素  tagname同一种元素设置；
   还好，我们可以通过逗号(,)来任意选择多个元素；:-D
   
   层级：
   1.我们常常需要获取某个元素下面的子元素(分所有， 直接2种)
     很简单：a b获取a下面所有b元素， a > b获取a下面直接子元素b
   2.我们还经常获取元素同一级别的兄弟元素，如：我们需要紧挨着某个元素的元素；或者某个元素后面的所有弟兄元素；
     同样简单：prev+next 获取紧挨着prev的next元素， prev~sibling获取prev后面所有      的同辈元素；
   
   集合内选择：
   在通过selector选择出一个大概的集合，我们可能需要其中的某些元素，那么我们还有进一步操作的selector；
   :first第一个， :last最后一个 :not去除某些元素 :eq, :gt, :lt等于，大于，小于某个索引的元素集合； 还可以直接获取索引号为奇数(:odd), 或者偶数(:event)得集合
   
   通过内容进一步筛选：
   我们还可以对dom对象的内容进行筛选，包括是否包含某些文本，是否包含某个元素，其下是否空；包含了我们需要的所有操作；
   :contains包含指定文本， :empty不含任何子内容
   :has包含某个元素           :parent 含有子内容
   
   可见性：
   通过:hidden 查找所有隐藏的元素， :visible查找显示的元素
   
   对属性进行过滤：
   我们可以匹配包含某属性的元素， 包含某属性且对值进行匹配, 并且可以加多个条件；
   [atr]包含某个属性， [atr=value]匹配有属性atr且值为val的元素；还有几个匹配方法，很类似正则表达式的匹配方式：
   [atr!=value] 不等于 [atr^=val]属性值以val开头， [atr$=val]属性值以val结尾
   [atr*=val]属性值包含val值；
   
   表单元素的匹配：
   :text  :radio :checkbox等等….
   :enable, :disabled, :checked(radio, checkbox选中), :selected;(select选中)

 

 

1. 元素属性的操作
     可以获取一个属性值attr(name), 设置一个属性值attr(key, value), 设置一组属性值：attr(properties);
   css类：
   addClass(class)添加css， removeClass移除css
2. 文本，值，html代码的获取
   文本和html代码没什么可说的，值的获取要说下
   .val()可以获取select的选择的值，如果是多选则返回一个数组；
   val(array)可以为check，select，radio赋值， 设置选择项，传递一个数组
3. 方法：
   数组的过滤:    $.grep(array, callback),
   $.grep([0,1,2], function(n, i){return n > 0});很好哦
   
   dom数组对象转换为jquery数组：
   $.makeArray($(“div”));
   
   jquery数组转换为dom数组：
   $.toArray();
   
   确定在数组中的位置：
   $.inArray(value, array); 确定value在array中的位置；
   
   $.unique(array)去除数组中重复的元素；
   
   $.map(array, callback);把数组array转换为另一个数组
   $.map([0,1,2], function(n){return n + 4});
4. 字符串操作：
   $.trim(str)去除前后的字符串

posted on 2010-08-13 15:00 一颗卤蛋 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lyroge/archive/2010/08/13/1799034.html