首页 > Web开发 > 详细

jquery(一)第一天:选择器

时间:2017-01-04 22:00:23      阅读:342      评论:0      收藏:0      [点我收藏+]

 

 

第一天:

  一: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.修改操作的实现:

 技术分享

 

jquery(一)第一天:选择器

原文:http://www.cnblogs.com/yuwei1/p/6250224.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!