jquery（一）第一天：选择器

 

 

第一天：

　　一：dom对象转换为jquery对象：

1.相等：$(document)=$()

2.相等：window.onload()=$().ready()

3.

　　二：jquery是一个集合，所以

　　（1）jQueryObj[0]代表jquery对象中的第一个dom对象

　　（2）jqQueryObj[0].get(0)也表示一个dom对象，和（1）结果一样

　　三：基本选择器

　　（1）<input type="button" id="b1" />

　　document.getElementById("b1") 等价于 $(#"b1") ，这是js中的回调

实例一：为id为b1的button按钮设置单击事件，点击按钮，id为one的元素背景颜色变为红色

实例二：改变所有div元素的背景颜色

实例三：js中获取class对象时，前面需要加点“.class”。改变class为mini的所有元素背景色

实例四：将所有元素的背景色

实例五：改变所有的<span>元素和id为two的元素的背景色为 #3399FF（含其中一个，都会改变）

实例六：<span,id=two,id=one,class=mini元素的背景色（含其中一个都会改变）

　　四：属性选择器（attribute，例如name="test",name为属性，test为值）

实例一：

 

实例二：

实例三：属性test的值不为test,则发生颜色改变。（title != 'test'）

实例四：

实例五：

实例六：

实例七：

实例八：

五：基本过滤选择器

实例一：

实例二：

实例三：

 

实例四：

 

实例五：:even代表偶数

 

实例六：

 

实例七：

实例八：

 

实例九：

 

 

 实例十：

 

实例十一：

 

六：子元素选择器（需要在每一个特定的选择器下选择子元素）

实例一：

实例二：

 

实例三：

 

实例四：

 

七：层次选择器

 实例一：

 

实例二：

 

 

实例三：两个div,一个为id='one'，下一个id='two',即改变id='two'的div背景颜色

 

 

实例四：

 

 

实例五：不算自己

 

 

实例六：

 

作业：

实例一：table中，tr的奇偶行变色

实例二：每行的第一个元素变色（包含了实例一）

实例三（对table中的例按奇数和偶数进行变色）：$().each()代表执行遍历数组元素方法，this代表当前遍历对象，$(this)把当前遍历对象变成jquery对象（t3为table的id,id="t3"）,tr的子元素为td,

八：内容选择器：

  实例一：

实例二：

实例三：

实例四：

实例五：

 

九：可见元素选择器（改变所有可见元素的背景色）

实例一：

 

实例二：

 

 

实例三：alert($obj.val())；即打印value属性中的值，也可写成: alert($obj.attr())；

十：表单(form)选择器

实例一：将所有input框的值全变为”aaaa“

实例二：

实例三：对选中的还进行了遍历

实例四：

实例五：遍历输出checkbox中已选择的项

 

练习：checkbox的全选，全不选，反选

按键：全选/全不选：

按键：全选，全不选两个按键的功能：

按键：反选：（还可以使用clone()方法）

 

十一：dom操作：

添加<li>：

删除id=cp的<li>:

替换（用下面的<p>替换掉<button>,只剩下了三个<p>）：

十二：list2Other

1.

2.

 3.实现：（只写了上面两个按键功能，下面的remove道理一样）

十三：table的维护（添加，删除）

1.

 2.

 

 

3操作实现（以下代码为一体的）：

 

 

 十四：table的维护（批量删除）：和十三的例子一样，只是新增了批量删除功能

1.

 

对以上图片一个部分进行了修改：

2.批量删除的实现：

3.全选功能的实现：

十五：table的维护：更新和修改（继十三、十四项目进行功能实现），根据id进行修改

1.第三个表单新增代码：隐藏域

 

2.js中新增代码：

3.新增一个属性id（今后项目不会那样做）:

 

 

1.获取中间那张表的对象属性值，并传给了第三张表，用于修改

 

2.修改操作的实现：