jquery选择器，dom操作

Jquery
一．环境搭建步骤（文件库可在http://jquery.com上下载）

i.导入jquery文件库
ii.在页面上引入文件库
iii.使用jquery

二．选择器：

1. 元素选择器：参数直接写元素名 $(“div”)
2. ID选择器：参数写#+ID $(“#div”)
3. Class选择器：参数写.+class名 $(“.div”)
4. *选择器：$(“*”) 选择所有元素 $(“div *”) 选择某元素下的所有元素
5. 复合选择器：$(“div,#p,.class”) 用”,”分隔 表示同时选 择多个
6. 后代选择器：$(“div p”) 选择div的所有后代中的p
7. 子元素选择器：$(“div>p”) 选择div的儿子辈的p
8. 过滤选择器：$(“li:first”) 获取第一个元素
   
   1. $(“li:last”) 获取最后一个元素
   2. $(“li:eq(index)”) 获取一组标签中任意一个，index 是下标
   3. $(“li:has(‘#vp1’)”) 获取包含制定选择器的元素
   4. $(“li:contains(‘包含的文本’)”) 获取包含指定文 本的元素
   5. $(“input:hidden”) 获取隐藏的元素(visible获取可 见的)
   6. $(“li[id=’l’]”) 属性选择器，选择包含制定属性 等于指定值的元素
   7. $(“li[id*=’l’]”) 选择li中有id属性,且id值包 含l的元素
   8. $(“li[id!=’l’]”) 选择li中有id属性,且id值不 等于l的元素
   9. 表单过滤选择器：注意form后面有空格，表示选择form的后代
      
      1. $(“form :input”) 选择表单中所有input标签
      2. $(“form :checked”) 选择所有被选中的的元素
      3. $(“form :disable”) 选择不可用的元素
      4. $(“form :image”) 选择所有type=”image”的元素

三．jquery操作DOM元素

• html() 有参数：设置某元素的内容， 无参数：获取某元素的内容
  
  • $("#div").html("1212");//document.getElementById("div").innerHTML="1212";
  • alert($("div *").html());//弹出div下的第一个元素的内容
• text() 有参数：设置某元素的内容， 无参数：获取某元素的内容
  
  • alert($("div *").text());//弹出div下所有的元素的内容
    以上两个方法的区别：html只设置或获取第一个 text则是全部满足条件的
• css() 设置样式
  
  • 一个参数：参数为样式名，获取某css样式
    
    • alert($("p").css("background"));//弹出p标签的样式"background"的值
  • 两个参数：参数分别是 样式名 样式值，为某元素设置特定的css样式
    
    • $("p").css("color","green");//设置p标签的字体颜色为green
  • 设置多个样式：css({样式名1:”样式值1”，样式名2:”样式值2”})
    
    • $("p label:first-child").css({background:"yellow",color:"green"});//设置p标签下的label中的第一个的背景颜色为黄色，字体颜色为绿色

• attr()

  • 一个参数：获取某个属性
    
    • alert($("#text2").attr("value"));//获取id为"text2"的value属性的值
  • 两个参数：分别是属性名，属性值
    
    • $("form :submit").attr("disabled","disabled");//设置form下的sibmit的disabled属性为disabled, 即改为不可操作的
  • 设置某个属性 多个属性设置： attr({属性名：”属性值”,属性名：”属性值”})
    
    • $("#text2").attr({value:"1111",disabled:"disabled"});//设置id为"text2"的value为"1111",disabled值为disabled

• removeAttr() 参数为属性名 删除指定属性

• a.append(b) 在a末尾追加b b可以是字符串,也可以是jquery对象
• a.appendTo(b) 将a追加在b的末尾，b可以是字符串，也可以是jquery对象
  将字符串转换为jquery对象：$(str)

    var str=<h1>22</h1>;
    $(str).appendTo($("body"));
    $("body").append("<b>追加内容<b>");

• a.before(b) 在a的前面插入b
• a.after(b) 在a的后面插入b
• clone() 克隆方法，返回值是被克隆元素的副本
  
  • var element_clone = $("p").clone();
$("p").after(element_clone);
    →