JavaWeb（day12）

##jQuery

###什么是jQuery

- 是一个js代码的框架，用来简化js代码

   

   用js：var obj =document.getElementById("id");
   用jq：$("#id");

- 此框架本身就是通过js代码实现的

####jQuery优势

1. 简化js代码
2. 可以像css一样通过选择器获取元素
3. 可以直接修改样式
4. 解决兼容性问题

####如何引入jQuery

- 因为jQuery就是一个js文件，所以引入方式和普通js文件一样

###$介绍

- $ 就是jQuery单词的替代品 $等效jQuery

###jQuery对象和js对象互相转换

1. 把js对象转成jQuery对象 
    

 var $jq = $(jsobj);

2. 把jq对象转成js，jq本身就是个数组，而数组里面的第一个对象就是js对象
  

    var js1 = $jq[0];
    var js2 = $jq.get(0);

###jq的选择器

###基本选择器

 

1. 标签名选择器 $("div")
2. id选择器 $("#id")
3. 类选择器 $(".class")
4. 分组选择器 $("#id,div,.class")
5. 任意元素选择器 $("*")

###层级选择器

 

1. 匹配所有的子元素和后代元素 $("div span");
2. 子元素选择器 $("div>span");
3. 相邻兄弟选择器 $("div+span");
4. 匹配div后面所有兄弟span      $("div~span")

###层级函数

1. 获取元素的所有兄弟
   

 $("#two").siblings("div")

2. 获取元素的哥哥元素
  

  $("#two").prev("div")

3. 获取元素的哥哥们元素
    

$("#two").prevAll("div")

4. 获取元素的弟弟元素
   

 $("#two").next("div")

5. 获取元素的弟弟们元素
   

 $("#two").nextAll("div")

###过滤选择器

1. 匹配所有div中的第一个元素
    

$("div:first")

2. 匹配所有div最后一个元素
  

  $("div:last")

3. 匹配所有div中的偶数
 

   $("div:even")

4. 匹配所有div中的奇数
    

$("div:odd")

5. 匹配所有div中下标为n的
  

  $("div:eq(n)")

6. 匹配所有div中下标小于n的
   

 $("div:lt(n)")

7. 匹配所有div中下标大于n的
   

 $("div:gt(n)")

8. 匹配所有div中class值不为one的
   

 $("div:not(.one)")

###内容选择器

1. 匹配所有包含p标签的div

$("div:has(p)")

2. 匹配所有空的div  

$("div:empty")

3. 匹配所有非空的div

$("div:parent")

4. 匹配文本内容包含xxx  

$("div:contains('xxx')")

###可见选择器

1. 匹配所有隐藏的元素
    

$("div:hidden")

2. 匹配所有显示的元素
   

 $("div:visible")

###隐藏和显示相关的函数

1. 隐藏元素
    

$("div:visible").hide()

2. 显示元素
    

$("#id").show()

3. 隐藏和显示切换
    

$("#id").toggle()

###属性选择器

1. 匹配有id属性的div元素
   

 $("div[id]")

2. 匹配有id并且值为d1 的元素
    

$("div[id='d1']")

3. 匹配有id并且值不为d1 的元素
   

 $("div[id！='d1']")

###子元素选择器

1. 匹配div中第n个子元素 n从1开始
   

 $("div:nth-child(n)")

2. 匹配div中第一个子元素
   

 $("div:first-child")

3. 匹配div中最后一个子元素
  

  $("div:last-child")

###表单选择器

1. 匹配所有的input元素 包括文本框，密码框，单选，多选，下拉选，文本域，button
    

$(":input")

2. 匹配所有的密码框
    

$(":password")

3. 匹配单选
   

 $(":radio")

4. 匹配多选
    

$(":checkbox")

5. 匹配所有被选中的  单选/多选/下拉选option
    

$(":checked")

6. 匹配所有被选中的 单选/多选
    

$("input:checked")

7. 匹配被选中的下拉选option
    

$(":selected")

####JQuery文档相关
####创建元素

 

 var $div = $("<div>abc</div>");

####添加元素
    

    $("#big").append($div);//最后面
    $("#big").prepend($div);//最前面

####插入元素

    js  父元素.insertBefore(新元素,弟弟元素)
    jq  兄弟元素.after($div);插入到兄弟元素的后面
    jq  兄弟元素.before($div);插入到兄弟元素的前面

####删除元素

    通过自己删除自己
   

 $("#abc").remove()

####修改样式
   

 $("#abc").css("background-color","red");