JQuery

1. 查找元素

- 通过id查找

var d = document.getElementById("id");

- 通过标签名查找

var arr = document.getElementsByTagName("标签名");

- 通过class查找

var arr = document.getElementsByClassName("class");

- 通过name查找

var arr = document.getElementsByName("name");

- 获取body

document.body;

2. 创建元素

var div = document.createElement("div");

3. 添加元素

父元素.appendChild(新元素);

4. 插入元素

父元素.insertBefore(新元素,弟弟元素);

5. 删除元素

父元素.removeChild(被删除的元素);

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

元素对象.style.样式名称

元素对象.style.样式名称 = "值";

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

元素对象.innerText

元素对象.innerText = "xxx";

8. 获取和修改元素的HTML内容

元素对象.innerHTML

元素对象.innerHTML = "<div>xxx</div>";

###获得窗口尺寸

- 宽度：

document.body.parentElement.clientWidth

- 高度：

document.body.parentElement.clientHeight

###js中事件相关内容

onclick onblur onfocus onload onsubmit onchange onmouseover

- 什么是事件：指一些特定的时间点，事件包括：状态改变事件、鼠标事件、键盘事件

####事件分类

- 鼠标事件：点击事件onclick 鼠标移入事件onmouseover 鼠标移出事件onmouseout 鼠标按下事件onmousedown 鼠标抬起onmouseup 鼠标移动onmousemove

可以通过event.clientX/Y 获取鼠标的坐标（坐标相对于窗口）

- 键盘事件： onkeydown键盘按下事件 onkeyup 键盘抬起事件

- 状态改变事件： onload页面加载完成事件 onchange值发生改变事件 onblur失去焦点事件 onfocus获取焦点事件 onsubmit表单提交事件 onresize窗口尺寸改变事件

####事件的绑定

1. 在标签内部添加事件属性

在事件方法中this代表的是window对象

2. 动态绑定事件，通过js代码给元素添加事件

在事件方法中的this代表的是事件源对象

####事件的取消

- 在事件中执行return false; 可以取消掉当前的事件

####事件对象event

- 该对象保存着和事件相关的信息

1. 鼠标事件中保存鼠标点击的坐标 event.clientX/clientY;

2. 键盘事件中保存着键盘的编码 event.keyCode String.fromCharCode(65);

3. 在任何事件中都可以通过event对象得到事件源

var obj = event.target || event.srcElement;

####事件传递（事件冒泡儿）

- 如果同一个范围有多个元素的事件需要响应则响应顺类似气泡儿，从最底层元素往上级元素传递

- 如果一个范围需要有多个元素添加相同的事件则可以把事件添加到这几个元素共同的上级元素上

obj.nodeName 得到元素名

###jQuery

- 什么jQuery：

1. 是一个js框架

2. 可以让程序员写的更少，但是实现的更多

3. jQuery本身就是通过js语言写的一个 js文件

4. 作用就是为了简化js代码

5. 可以像css一样获取页面中的元素

6. 可以像css一样批量修改元素样式

7. 可以解决部分兼容性问题

###引入jQuery框架

- 由于jQuery就是一个普通的js文件所以直接用script标签的src属性引入即可

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

1. js对象转jq对象

var jq = $(js);

2. jq对象转js对象

- jq对象实际上就是数组，对数组进行了扩展

var js = jq[0];

###选择器

####基础选择器

1. 标签名选择器 $("div")

2. id选择器 $("#id")

3. 类选择器 $(".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元素

- 层级方法

1. 获取元素的所有兄弟元素

$("#abc").siblings(?"div");

2. 获取元素的哥哥元素

$("#abc").prev(?"div");

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

$("#abc").prevAll(?"div");

4. 获取元素的弟弟元素

$("#abc").next(?"div");

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

$("#abc").nextAll(?"div");

###过滤选择器

1. $("div:first") 匹配第一个div元素

2. $("div:last") 匹配最后一个div元素

3. $("div:even") 匹配所有div中下标为偶数的div元素从0开始

4. $("div:odd") 匹配所有div中下标为奇数的div元素从0开始

5. $("div:eq(n)") 匹配下标为n的div元素

6. $("div:lt(n)") 匹配下标小于n的div元素

7. $("div:gt(n)") 匹配下标大于n的div元素

8. $("div:not(.abc)") 匹配class值不为abc的所有div

###内容选择器

1. $("div:has(p)") 匹配所有包含p子元素的div

2. $("div:empty") 匹配空的div

3. $("div:parent") 匹配非空的div

4. $("div:contains('xxx')") 匹配包含xxx文本的div

###可见选择器

1. $("div:hidden") 匹配所有隐藏的div

2. $("div:visible") 匹配所有显示的div

- 显示隐藏相关的方法

1. 让隐藏元素显示

$("div:hidden").show();

2. 让显示的元素隐藏

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

3. 隐藏显示切换

$("#abc").toggle();

###属性选择器

1. $("div[id]") 匹配包含id属性的div元素

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开始

###表单选择器

1. $(":input") 匹配表单中的所有控件

2. $(":password") 匹配密码框

3. $(":radio") 匹配单选

4. $(":checkbox") 匹配多选

5. $(":checked") 匹配所有选中的单选、多选、下拉选

6. $("input:checked") 匹配所有选中的单选、多选

7. $(":selected") 匹配所有选中的下拉选

####选择器回顾

1. 基础选择器

- 标签名 div

- id #id

- 类 .class

- 分组 div,span

- 任意元素 *

2. 层级选择器

- div span

- div>span

- div+span

- div~span

- .siblings("div")

- .prev()

- .prevAll()

- .next()

- .nextAll()

3. 过滤选择器

- div:first

- div:last

- div:even

- div:odd

- div:eq()

- div:lt()

- div:gt()

- div:not()

4. 内容选择器

- div:has(span)

- div:empty

- div:parent

- div:contains('xxx')

5. 可见选择器

- div：visible

- div:hidden

- .show()

- .hide()

- .toggle()

6. 属性选择器

- div[id]

- div[id='xxx']

- div[id!='xxx']

7. 子元素选择器

- div:first-child

- div:last-child

- div:nth-child(n) 从1开始

8. 表单选择器

- :input

- :password

- :radio

- :checkbox

- :checked

- input:checked

- :selected

###创建和添加元素

1. 创建元素对象

var d = $("<div id='d1' class='c1'>abc</div>");

2. 添加元素

父元素.append(d); //添加到最后

父元素.prepend(d); //添加最前面

#### 插入元素

js:父元素.insertBefore(新元素,弟弟元素);

兄弟元素.before(新元素); 添加到兄弟元素的前面

兄弟元素.after(新元素); 添加到兄弟元素的后面

####删除元素

js：父元素.removeChild(被删除的元素);

被删除的元素.remove();

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

元素对象.text(); //获取

元素对象.text("abc"); //修改

####获取和修改元素的html内容

元素对象.html();//获取

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

####获取和修改元素的css样式

元素对象.css("color"); //获取color样式的值

元素对象.css("color","red"); //修改

元素对象.css({"width":"100px","height":"200px"});

####获取和修改元素的属性 attr = attribute(属性)

元素对象.attr("id"); 获取元素的id属性值

元素对象.attr("id","abc"); 设置id值为abc

###课程回顾

1. jQuery 用于简化js代码

2. 引入方式就是引入普通js文件的方式

3. 页面加载完成事件

$(function(){})

4. js对象和jq对象互相转换

- js转jq var jq = $(js);

- jq转js var js = jq[0];

5. 选择器

- 基础选择器

1. div

2. #id

3. .class

4. div,span,#id

5. *

- 层级选择器

1. div span

2. div>span

3. div+span

4. div~span

-层级方法

1. .siblings()

2. .prev()

3. .prevAll()

4. .next()

5. .nextAll()

6. .children()

7. .parent()

- 过滤选择器

1. div:first

2. div:last

3. div:even

4. div:odd

5. div:eq()

6. div:lt()

7. div:gt()

8. div:not(.one)

- 内容选择器

1. div:has(p)

2. div:empty

3. div:parent

4. div:contains('xxx')

- 可见选择器

1. div:hidden

2. div:visible

-方法：

1. .show()

2. .hide()

3. .toggle()

- 属性选择器

1. div[id]

2. div[id='xx']

3. div[id!='xx']

- 子元素选择器

1. div:first-child

2. div:last-child

3. div:nth-child(n) n从1开始

- 表单选择器

1. :input

2. :password

3. :radio

4. :checkbox

5. :checked

6. input:checked

7. :selected

6. 创建元素

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

7. 添加

父元素.append(d); 最后

父元素.prepend(d); 最前面

8. 插入

兄弟元素.before(d);

兄弟元素.after(d);

9. 删除

元素.remove();

10. 文本相关

div.text()

11. html相关

div.html();

12. css相关

div.css("color","red");

div.css({"":"","":""});

13. 属性相关

div.attr("id","xxx");