jQuery

一、 jQuery

• jQuery框架:是一个通过js语言写的框架,对原生js语言进行封装,可以上程序员写的更少但实现的更多

• 优点:

    1. 可以向css的选择器一样获取页面中的元素
    	js: var d = document.getElementById("id");    
    	jq:    $("#id")
    2. 可以批量给元素添加样式
    	js:var arr = document.getElementsByTagName("div");
    		for(var i=0;i<arr.length;i++){
    			arr[i].style.color="red";
    		}
    	jq: $("div").css("color","red");
    3. 可以解决部分浏览器的兼容性问题
  

1.1 引入jQuery

• 和引入一个普通的js文件一样

    <script type="text/javascript" src="../jq/js/jquery-1.4.2.js"></script>
  

1.2 JS对象和JQ对象之间的互相转换

1. js转jq
   var jq = $(js);
2. jq转js
   var js = jq[0];

1.3 选择器

1. 基础选择器

 和css的用法一样
 
	- 标签名选择器    $("div")
	- id选择器   $("#id")
	- class选择器  $(".class")
	- 分组选择器   $("div,#id,.class")
	- 任意元素选择器 $("*")

2. 层级选择器

	- $("div span") 匹配div里面所有的span
	- $("div>span") 匹配div里面所有的span子元素
	- $("div+span") 匹配div的弟弟元素span
	- $("div~span") 匹配div的弟弟们span 

- 2.1层级方法:

	1. $("#abc").siblings()  获取id为abc元素的所有兄弟元素
		$("#abc").siblings("div") 获取id为abc元素的所有div兄弟元素
	2. $("#abc").prev() 匹配元素的哥哥元素
	3. $("#abc").prevAll() 匹配元素的哥哥们元素
	4. $("#abc").next() 匹配元素的弟弟元素
	5. $("#abc").nextAll() 匹配元素的弟弟们元素
	6. $("#abc").children() 儿子们，获取元素的子元素们
	7. $("#abc").parent()   父元素。获取元素的父元素

3. 过滤选择器

	- $("div:first") 匹配所有div中的第一个
	- $("div:last") 匹配所有div中的最后一个
	- $("div:even") 匹配所有div中下标为偶数的元素
	- $("div:odd") 匹配所有div中下标为奇数的元素
	- $("div:lt(n)") 匹配所有div中下标小于n的元素 
	- $("div:gt(n)") 匹配所有div中下标大于n的元素 
	- $("div:eq(n)") 匹配所有div中下标等于n的元素 
	- $("div:not(.abc)") 匹配所有div中class值不等于abc的元素

4. 内容选择器

	- $("div:has(p)") 匹配所有包含p子元素的div
	- $("div:empty")  匹配所有空的div
	- $("div:parent") 匹配非空的div
	- $("div:contains('xxx')")  匹配包含xxx文本的div

5. 可见选择器

	- $("div:hidden") 匹配所有隐藏的div
	- $("div:visible") 匹配所有显示的div
	- 和隐藏显示相关的方法
		1. $("#abc").show(); 显示
		2. $("#abc").hide(); 隐藏
		3. $("#abc").toggle(); 隐藏显示切换

6. 属性选择器

- $("div[id]") 匹配有id属性的所有div
- $("div[id='xxx']") 匹配id值为xxx的所有div
- $("div[id!='xxx']") 匹配id值不为xxx的所有div

7. 子元素选择器

- $("div:first-child") 是第一个子元素并且是div
- $("div:last-child") 是最后一个子元素并且是div
- $("div:nth-child(n)") 是第n个子元素并且是div

8. 表单选择器

- $(":input") 匹配表单中的每一个控件
- $(":password") 匹配表单中的所有密码框
- $(":radio") 匹配所有单选 
- $(":checkbox") 匹配所有的多选
- $(":checked") 匹配所有选中的单选/多选和下拉选 
- $("input:checked") 匹配所有选中的单选和多选
- $(":selected") 匹配所有选中的下拉选 

1.4 创建和添加元素

1. 创建元素

js:var d = document.createElement("div");
jq: var d = $("<div id='xxx'>xxxxx</div>");

2. 添加元素

js: 父元素.appendChild(新元素)
jq: 父元素.append(新元素); //添加到最后面
	父元素.prepend(新元素); //添加到最前面

3. 插入元素

js: 父元素.insertBefore(新元素,弟弟);
jq: 弟弟.before(新元素);
	哥哥.after(新元素);

4. 删除元素

js: 父元素.removeChild(被删除的元素);
jq: 被删除的元素.remove();

1.5读写节点

1.获取和修改元素的文本内容

元素对象.text()  //获取
元素对象.text("xxx")  //修改

2.获取和修改元素的html内容

元素对象.html()  //获取
元素对象.html("<h1>xxx</h1>") //修改

3.获取和修改元素的样式

元素对象.css("color"); //获取样式的值
元素对象.css("color","red"); //赋值
元素对象.css({"xxx":"xx","xxx":"xx"}) //批量赋值

4.获取和修改元素的属性

元素对象.attr("属性名"); //获取
元素对象.attr("属性名","值"); //赋值

二、课程回顾:

1. jQuery js语言的框架, 写的更少 实现的更多
2. 引入方式 和普通的js文件一样
3. js和jq对象之间的转换

• js-jq : var jq = $(js);
• jq-js : var js = jq[0];

4. 选择器

• 基础选择器
  1. 标签名 $(“div”)
  2. id #id
  3. class .class
  4. 分组 div,#id,.class
  5. 任意元素 *
• 层级选择器
  1. div span div里面所有的span
  2. div>span div里面所有子元素span
  3. div+span div的弟弟span元素
  4. div~span div的弟弟们span元素
  5. .siblings() 所有兄弟
  6. .prev() 哥哥元素
  7. .prevAll() 哥哥们
  8. .next() 弟弟
  9. .nextAll() 弟弟们
  10. .children() 儿子们
  11. .parent() 父元素
• 过滤选择器
  1. div:first 第一个
  2. div:last 最后一个
  3. div:even 偶数
  4. div:odd 奇数
  5. div:lt(n) 小于n
  6. div:gt(n) 大于n
  7. div:eq(n) 等于n
  8. div:not(xxx) 不等于xxx
• 可见选择器
  1. div:hidden 所有隐藏
  2. div:visible 所有显示
  3. .show() 显示
  4. .hide() 隐藏
  5. .toggle() 显示隐藏切换
• 内容选择器
  1. div:has§ 包含p子元素的div
  2. div:empty 空的div
  3. div:parent 非空的div
  4. div:contains(‘xxx’) 包含xxx文本的div
• 属性选择器
  1. div[id] 包含id属性
  2. div[id=‘xxx’] id=xxx的div
  3. div[id!=‘xxx’] id不等于xxx的div
• 子元素选择器
  1. div:first-child 第一个div子元素
  2. div:last-child 最后一个div 子元素
  3. div:nth-child(n) 第n个div子元素
• 表单选择器
  1. :input 所有控件
  2. :password 所有密码框
  3. :radio 所有单选
  4. :checkbox 所有多选
  5. :checked 所有选中的单选多选和下拉选
  6. input:checked 所有选中的单选和多选
  7. :selected 所有选中的下拉选

5. 创建元素

    var d = $("<div xx='xx'>xxx</div>");
   

6. 添加
   父元素.append(新元素) 最后面
   父元素.prepend(新元素) 最前面

7. 插入
   弟弟.before(新元素)
   哥哥.after(新元素)

8. 删除
   元素.remove();

9. 获取和修改元素文本
   元素.text();
   元素.text(“xxx”);

10. 获取和修改元素html
    元素.html();
    元素.html(“xxx”);

11. 获取和修改元素样式
    元素.css(“样式名”); 获取值
    元素.css(“样式名”,“值”);
    元素.css({"":"","":""});

12. 获取和修改元素的属性
    元素.attr(“属性名”); 获取值
    元素.attr(“属性名”,“值”);