jQuery基础语法

                                        jQuery基础语法

1.Query语法是通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法：$(selector).action();

• $美元符号定义jQuery

• selector 选择符需要查找的元素 支持css1~css3中的主流选择器

• action() 执行对元素的操作

  例如： $("p").hide();//隐藏所有 <p> 元素
  

2.DOM对象转换为jQuery对象

 var box =

document.getElementById(“box”);//DOM对象

 $(“#box”);//jQuery对象

3.jQuery对象转换为一个DOM对象

 var $divs=$("div");//jQuery对象 

divs中包含所有的$divs元素

 var div=$divs[0];//div为DOM对象

 //使用jQuery中的get()方法进行转换，只需要提供一个索引就可以了

 var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象

4.选择器：

（1）ID选择器 $("#id");（注意:id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的）

（2）class选择器 $(".classname");

（3）element元素选择器 $(“标签名称”);

（4）全选择器 $("*")

（5）层级选择器

文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点之间就会存在父子，兄弟，祖孙的关系了。选择器中的层级选择器就是用来处理这种关系子元素
后代元素 兄弟元素 相邻元素

通过一个列表，对比层级选择器的区别

选择器 描述

$(“ancestor descendant”) 后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后代可能该元素的一个孩子，孙子，曾孙等

$(“parent > child”) 子选择器：parent的直接子元素

$(“prev + next”) 相邻兄弟选择器：匹配所有紧接在 prev 元素后的 next 元素

$(“prev ~ siblings”)一般兄弟选择器：匹配 prev 元素之后的所有 siblings 元素

5.筛选选择器：

$(":first")获取匹配第一个元素例如:$(‘li:first’);

$(":last")获取匹配的最后个元素例如:$(‘li:last’);

$(":not(selector)")去除所有与给定选择器匹配的元素例如:$(“input:not(:checked)”)

$(":even")匹配所有索引值为偶数的元素，从0开始计数例如:$(“li:even”)

$(":odd")匹配所有索引值为奇数的元素，从0开始计数例如:$(“li:odd”)

$(":eq(index)")匹配一个给定索引值的元素，从0开始计数例如:$(“li:eq(1)”)

$(":gt(index)")匹配所有大于给定索引值的元素，从0开始计数例如:$(“li:gt(0)”)

$(":lt(index)")匹配所有小于给定索引值的元素，从0开始计数例如:$(“li:gt(2)”)

$(":header")匹配如h1,h2,h3之类的标题元素例如:$(":header").css(“background”,
“#EEE”);

$(":animated") 匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效)

例如:$(":header").css(“background”,
“#EEE”);

$(":focus") 匹配当前获取焦点的元素。

6.样式操作$(element).css()方法

（1）$(element).css(“属性名”) //获取匹配元素集合中的第一个元素的样式属性的计算值

（2）$(element).css([“属性名1”,“属性名2”]) //传递一个数组，返回一个对象结果

（3）$(element).css(“属性”,“属性值”) //设置元素的css样式

（4）$(element).css({“属性1”:“属性值1”,“属性2”:“属性值2”}) //可以传一个对象，同时设置多个样式

（5）$(element).css({属性名,function}) //可以传入一个回调函数，返回取到对应的值进行处理

7. 属性的.html()与.text()方法.val()方法

（1） $(element).html() 获取element元素的HTML内容

（2）$(element).html(“htmlString”) 为每一个匹配元素添加html内容

（重要说明：$(element) .html()方法内部使用的是DOM的innerHTML属性来处理的，

所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅只是文本内容）

（3）. $(element).text() 获取element元素的文本内容

（4）. $(element).text(“textString”) 用于设置匹配元素内容的文本

.html与.text的异同:

.html与.text的方法操作是一样，只是在具体针对处理对象不同

.html处理的是元素内容，.text处理的是文本内容

.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用

如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的

火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

（5）$(ele).val()方法主要是用于处理表单元素的值,比如 input, select 和 textarea

（6）$(ele).val() 获取匹配的元素集合中第一个元素的当前值

（7）$(ele).val(value) 设置匹配的元素集合中每个元素的值

（通过$(ele).val()处理select元素， 当没有选择项被选中，它返回null

   $(ele).val()方法多用来设置表单的字段的值

   如果select元素有multiple（多选）属性，并且至少一个选择项被选中，

$(ele).val()方法返回一个数组，这个数组包含每个选中选择项的值）

8. attr()与removeAttr()的用法

attr()方法的用法:

（1）$(element).attr(“属性名”);//获取属性名的属性值

（2）$(element).attr(“属性”,“属性值”);//设置属性的属性值

（3）$(element).attr(“属性名”,“函数值”);//设置属性的函数值

（4）$(element).attr({“属性名”:“属性值”,“属性名”:“属性值”});//给指定元素设置多个属性值

removeAttr()的用法

（1）$(element).removeAttr(“属性名”);//移出对应的属性

9. prop()与removeProp()的用法

prop()方法的用法

（1）$(element).prop(“属性名”);//获取属性名的属性值

（2）$(element).prop(“属性名”,“属性值”);//设置属性的属性值

（3）$(element).prop(“属性名”,“函数值”);//设置属性的函数值

（4）$(element).prop({“属性名”:“属性值”,“属性名”:“属性值”});//给指定元素设置多个属性removeProp()方法的用法:

（1）$(element).removeProp(“属性名”);//移出对应的属性

10.动态操作class

（1）$(element).addClass();//为每个匹配元素所要增加的一个或多个样式名

   - 方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

（2）$(element).removeClass();//每个匹配元素移除的一个或多个用空格隔开的样式名

  例：$("#box").addClass("bgGreen

fontStyle");

（3）$(element).toggleClass();//在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类：例： //如果有bgGreen类则移出，如果没有则添加bgGreen类

  function toggleClassFun() {

       $("#box").toggleClass("bgGreen");

       $("#box").toggleClass("bgGreen

fontStyle");

    }