001-jquery入门

jquery入门

1、jQuery介绍

　　jQuery是一个js框架，其主要思想是：通过选择器查找到对应的节点，然后对这个节点进行封装(封装成一个jQuery对象)。通过调用jQuery对象的属性或者方法来实现对节点的操作。

这样做的好处是：第一，将不同的浏览器之间的差异屏蔽起来了。第二，代码更加简洁，维护方便。

2、jQuery对象与dom节点转换

2.1、dom节点--》jQuery对象

//通过js获取dom节点
var obj = document.getElementById('d1');
//将dom节点转换为jQuery对象
var $obj = $(obj);

2.2、jQuery对象--》dom节点

//通过jQuery获取Jquery对象
var $obj = $('#d1');
//方式一：jQuery对象转换为dom节点
var obj1 = $obj.get(0);
//方式二：jQuery对象转换为dom节点
var obj2 = $obj.get()[0];

2.3、jQuery与其它js框架共存

//使用$a来代替jQuery的$函数。
var $a = jQuery.noConflict();

3、选择器　　

　　jQuery模仿css选择器语法，创建的一套用于查找节点的规则

3.1、基本选择器 　　

      #id　            id选择器   

//选择id值为#text的元素
var text_query=$("#text");

  　.class　         类选择器

//选择class值为text的元素
var text_query=$(".text");

     element　　  元素选择器

//选择input元素
var input_query=$("input");

    selector1,select2.......selectn         选择selector1至selectn所有

//选择id值为text 、 class值为text的元素、input元素及table元素
var text_query=$("#text,.text,input,table");

3.2、层次选择器

    select1 select2　　                       选择select1下的所有select2 

//选择tr元素下的id值为text的元素
var text_query=$("tr #text");            

    select1>select2                           选择select1下的直接select2子元素

//选择td元素下的input元素，且其为td元素的直接下一级元素
var input_query=$("td>input");

    select1+select2　　                      选择与同辈select1的下一个select2

//选择id值为text元素的同级元素，且为其之后、class值为button的第一个元素
var button_query=$("#text+.button");

    select1~select2                            选择与同辈select1、且是select1之后的所有select2

//选择id值为text元素的同级元素，且为其之后、class值为buttion的所有元素
var button_query=$("#text~.button");

3.3、过滤选择器

1、基本过滤选择器

　　:first                                          获取第一个元素

//第一个input元素
var input_query=$("input:first");

　　:last                                           获取最后一个元素

//最后一个input元素
var input_query=$("input:last");

　　:not(selector)                              获取不含selector的元素

//id值不为text的input元素
var input_query=$("input:not(#text)");

　　:even                                         获取所有奇数元素

//获取奇数input元素。其中第一个元素为奇数
var input_query=$("input:even");

　　:odd                                          获取所有偶数元素

//获取偶数input元素。其中第一个元素为奇数
var input_query=$("input:odd");

　　:eq(index)                                  获取第index元素

//获取第五个input元素
var input_query=$("input:eq(5)");

　　:gt(index)                                   获取大于index元素

//获取索引大于5的所有input元素
var input_query=$("input:gt(5)");

　　:lt(index)                                    获取小于index元素

//获取索引小于5的所有input元素
var input_query=$("input:lt(5)");

 

    :header                                       获取h标题元素

//获取页面所有<h>标题元素

var h_query=$(":header");

    :animated                                   获取正在执行动画效果的元素

//获取正在执行动画效果的元素

var animated_query=$(":animated");

2、内容过滤选择器

　　:contains(text)                                 匹配包含给定文本的元素

//获取html内容包含“你好世界！”的span元素
var h1_query=$("span:contains('你好世界！')");

　　:empty                                            匹配所有不包含子元素或者文本的空元素

//获取不包含子元素或html内容为空的td元素
var td_query=$("td:empty");

　　:has(selector)                                   匹配含有选择器所匹配的元素的元素

//获取包含input子元素的td元素
var td_query=$("td:has(input)");

　　:parent                                            匹配含有子元素或者文本的元素

//获取包含td子元素的元素
var td_query=$("td:parent");

3、可见性过滤选择器

　　:hidden                                           匹配所有不可见元素，或者type为hidden的元素

//查找隐藏的input元素
var input_query=$("input:hidden");

　　:visible                                            匹配所有的可见元素

//查找可见的input元素
var input_query=$("input:visible");

4、属性过滤选择器

　　[attribute]                                       匹配包含属性的

//获取有id属性的input元素
var input_query=$("input[id]");

　　[attribute=value]                              匹配属性值等于的

//获取name值为text的input元素
var input_query=$("input[name='text']");

　　[attribute!=value]                             匹配属性值不等于的

//获取name值不为text的input元素
var input_query=$("input[name!='text']");

　　[attribute^=text]                            匹配属性值开头

//获取name值以text开头的input元素
var input_query=$("input[name^='text']")

　　[attribute$=value]                          匹配属性值结尾

//获取name值以text结尾的input元素
var input_query=$("input[name$='text']");

     [attribute*=value]                          匹配属性值内容

//获取name值中含有text的input元素
var input_query=$("input[name*='text']");

     [attribute][attribute=value]            多种属性组合

//获取有id属性并且name值为text的input元素
var input_query=$("input[id][name=='text']");

5、子元素过滤选择器

　　:nth-child(index/even/odd)               

//查找所有在父元素中的所有子元素中排第2的input元素 
var input_query=$("input:nth-child(2)");　　

 

     :first-child

//查找所有在父元素中的所有子元素中排第一的input元素
var input_query=$("input:first-child");

    :last-child

//查找所有在父元素中所有子元素中排最后一个的input元素
var input_query=$("input:last-child");

    :only-child

//查找所有在父元素中是唯一子元素的input元素
var input_query=$("input:only-child");

6、表单对象属性过滤选择器
　　:enabled                                    匹配可用元素

　　:disabled                                   匹配不可用元素
　　:checked                                   匹配单选复选的选中元素
　　:selected                                   匹配下拉框的选中元素

3.4、表单选择器

　　:input
　　:text
　　:pasword
　　:radio
　　:checkbox
　　:submit
　　:image
　　:reset
　　:button
　　:file
　　:hidden