jQuery基础

1、jQuery基础  first.html
(1)简介
jQuery是一个js框架，最大的特点是，利用
选择器查找要操作的节点，并且将找到的节点
封装成一个jQuery对象，这样封装的好处有两个：
一个是可兼容不同的浏览器，另外，代码也会更
简洁。
(2)编程步骤
step1,利用选择器(jQuery借鉴了css选择器的
语法)查找到要操作的dom节点(这些节点会被
封装成一个jQuery对象)。
step2,调用jQuery对象的属性或者方法。
(3)jQuery对象与dom对象的转换。
1)dom对象 ---> jQuery对象
$(dom对象);
2)jQuery对象  ---> dom对象
方式一 $obj.get(0);
方式二       $obj.get()[0];

2、选择器
1)基本选择器  selector/s1.html
#id
.class
element
select1,select2..selectn
*
2)层次选择器 selector/s2.html
select1 select2 查找所有的后代
select1>select2 只查找子节点
select1+select2 下一个兄弟
select1~select2 下面所有的兄弟
3)过滤选择器
(1)基本过滤选择器  selector / s3.html
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
(2)内容过滤选择器  selector / s4.html
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素
(3)可见性过滤选择器  selector / s5.html
:hidden 匹配所有不可见元素，
或者type为hidden的元素
:visible 匹配所有的可见元素
(4)属性过滤选择器  selector / s6.html
[attribute]
[attribute=value]
[attribute!=value]
(5)子元素过滤选择器 selector /s7.html
index:下标从1开始！！！
:nth-child(index/even/odd)
(6)表单对象属性过滤选择器 selector /s8.html
:enabled
:disabled
:checked
:selected
4)表单选择器
:input
:text      
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

练习：
对员工列表做如下操作：
1)打开页面，隔行显示(奇数行一个颜色，偶数行
一个颜色)。
2)点击按钮1,把包含有"王五“的这一行加亮(
改变这一行的背景颜色)。
3)点击按钮2,把第2行的薪水加亮。


3、dom操作
1)查询   dom / d1.html
利用选择器找到节点之后，可以获取节点的html
内容、文本内容、属性值、value值。
a, html()   innerHTML,包含了节点之间的所有内容
b, text()   innerText,只有文本
c, attr() 访问某个属性
d, val()     value属性值
以上四个方法，也可以修改。
2)创建   dom / d2.html
$(html);
3)插入节点  dom / d2.html
append():作为最后一个孩子追加进来。
prepend():作为第一个孩子追加进来。
after():作为下一个兄弟添加进来。
before():作为上一个兄弟添加进来。
4)删除节点   dom / d3.html
remove()
remove(selector)
empty():清空节点
5)数据与行为分离 dom / d4.html d5.html
将javascript代码写到.js文件里面，然后html文件引入
相应的js文件就可以了。这样，方便代码的维护。
$(fn);
fn是一个函数，我们经常使用匿名函数，比如
$(function(){
//当整个页面加载完毕，会执行这儿的代码。
});
6)复制节点  dom / d6.html
clone()
clone(true):使复制的节点也具有行为(将事件
处理代码一块复制)
7)属性操作
读取：attr('');
设置： attr('','') 或者一次
设置多个 attr({"class":"s1","style":"color:red;"});
删除：removeAttr('')
8)样式操作  dom / d7.html
获取和设置: attr("class","")或者 attr("style","");
追加:addClass('')
移除:removeClass('') 
或者removeClass('s1 s2') 
或者removeClass()//会删除所有样式
是否有某个样式 hasClass('')
切换样式：toggleClass,有该样式，就删除，没有，
就添加。
读取css('')
设置css('','')或者
css({'':'','':''})//设置多个样式
9)遍历节点  dom / d8.html
children()/children(selector):只考虑子元素，
不考虑其它后代元素。
next()/next(selector):下一个兄弟
prev()/prev(selector):上一个兄弟
siblings()/siblings(selector):其它兄弟
find(selector):查找所有的后代
parent():父节点