2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1、获取元素:

  1).size(): 获取元素的个数。

    $(“img”).size():获取有多少个img。

  2).eq():获取元素。

    $(“img[title]”).eq(1):获取第二个带有title属性的img标签。

    也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq()。

  3).get() :获得由选择器指定的DOM元素。

    x=$("p").get(0):获取第一个 p 元素的值。

  4)index():获取某项标签的索引。

    $(“div”).index($(this)):获取当前操作的这个div在所有div中的索引。

  5)find():搜寻标记获得新的集合。

    $(“p”).find(“span”): 在所有p标记元素中搜索span标记,获取一个新的元素集合。

  *$(this):表示当前操作对象。

  【例】var iNum=$(“li”).index($(“li[title=isaac]”)[0]) ,说明这句话的意思。

    答案: 1)  $(“li”):对所有的li标签进行查找;

        2)  $(“li”).index() :查找()内对象在所有li标签中的索引;

        3)  $(“li[title=isaac]”)[0]:查找第一个拥有“title=isaac”这个title属性的li标签;

        4)  最终解释为:对所有的li标签进行查找,查找出“第一个拥有‘title=isaac’这个属性的li标签"在所有li标签中的索引。

2、添加元素:addClass()

  $(“img[title]”).addClass(“myClass”) :给所有带有title属性的img标签,添加上myClass的样式。

3、删除元素:not()

  $(“li[title]”).not(“[title*=isaac]”) :在所有设置了title属性的li标签中,删除掉带有[title*=isaac]这种title属性的li标签。([title*=isaac]:含有isaac字符串的title)

  

注意:not()方法所接受的参数不能包含特定的元素,只能是通用的表达式。
错误:$(“li[title]”).not(“img[title*=isaac]”)
正确: $(“li[title]”).not(“[title*=isaac]”)

4、过滤元素:filter()

  $(“li”).filter(“[title*=isaac]” ) 等同于 $(“li[title*=isaac]”) :对所有的li标签,过滤筛选出包含有[title*=isaac]这种title属性的标签。

注意:

1)filter中的参数,不能直接是等于匹配,只能是前匹配^=,后匹配&=,任意匹配*=

2)filter(函数) 函数要求返回布尔值,对于返回值为true的元素保留,否则去除

5、判断元素:is()

  var bImge=$(“div”).is(“img”) :判断页面中的div块中是否包含img标记,返回布尔值,是或否。

6、遍历元素:each()

  *遍历:将选中的标签,一个一个全部经历一遍。

$(function(){
  $(“img”).each(function(index){
    this.title=”这是第”+index+”副图,id是“+this.id;
  });
});

  遍历所有的img,让每一个img都设置一个title属性值为:这是第 n 幅图,id是 n

7、获取属性/设置属性值:attr()

  attr()有2个作用:一个是获取属性值,一个是为属性设置值。

  1)获取属性值:

    var s = $("#txt").attr("value");  获取到txt里面的value属性值

  2)设置属性值:

    $("#txt").attr({"value":"xxxxx","title":"aaaaa"});  查询txt,为其中的value设值xxxxx的值,为title设值aaaaa的值

8、设置元素样式:

  1)添加样式:addClass()

$("#btn").click(function(){    
  $(this).addClass("b");    //找到id为btn的标签,点击后让它在原样式基础上加上样式b
});

  2)删除样式:removeClass()

$("#btn").click(function(){    
  $(this).removeClass("b");    //找到id为btn的标签,点击后让它在原样式基础上移除样式b
});

  3)写入样式:css()

$("#btn").click(function(){    
  $(#d1).css("color","blue");    //找到id为btn的标签,点击后让id为d1的标签拥有“颜色变成蓝色”的css样式
});

4)切换样式:toggleClass()

$("#btn").click(function(){    
  $(#d1).toggleClass("highlight");    //点击时不断切换,样式交替执行,一会儿有此样式一会儿没有
});

  

9、改变操作对象:

  1).end():为当前对象的前一步对象进行操作

  2).andself():为当前对象和它的前一步对象都进行操作

  【例】说明以下三句话的含义:

  1)$(“p”).find(“span”).addClass(“myClass1”).addClass(“myClass2”)

  2)$(“p”).find(“span”).addClass(“myClass1”).end().addClass(“myClass2”)

  3)$(“p”).find(“span”).addClass(“myClass1”).andself().addClass(“myClass2”)

  答:1)在所有p标签中,找到span标签为它们加上myClass1样式,再加上myClass2样式

    2)在所有p标签中,找到span标签为它们加上myClass1样式,然后返回至上一个对象$(“p”),为所有p标签加上myClass2样式

    3)在所有p标签中,找到span标签为它们加上myClass1样式,并且为它们自己以及上一个对象$(“p”)加上myClass2样式

10、动态切换:

  1)mouseover():鼠标移动上去时改变样式

$(“p”).mouseover(function(){

  $(this).css(“color”,”red”);

});

  2)mousetout():鼠标移走后改变样式

$(“p”).mouseout(function(){

  $(this).css(“color”,”red”);

});

  3)hover(事件1,事件2):鼠标放上去事件1,移开事件2

$(“p”).hover(function(){

  $("#d1").addClass(“c”);

  },function(){

      $("#d1").removeClass(“c”);

});

    对p标签中id=d1的标签,鼠标放上时加c样式,移开时移除c样式。

11、判断样式:hasClass()

  $(“li”).hasClass(“myClass”);  判断li中是否含有myClass的样式,返回为布尔型,是或否

  

时间: 2024-10-06 14:27:00

2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)的相关文章

2015.7.8 第三课 课程重点(css样式)

[课前提问及答案] 1.table有哪些属性:width.height.border.cellspacing.cellpadding.bordercolor.bgcolor.align  宽 高 边框 内框宽度  文字到边框距离 边框颜色 背景色 水平位置 2.body有哪些属性:bgcolor.background.text 背景颜色 背景图片 文字颜色 ----------------------------------------------------------------------

2015.7.20 第十课 课程重点(jq选择器:id、类、标签、特殊、属性、包含、位置、过滤)

1.在VS中新建jq项目: 新建web窗体时选择第二个: 将系统生成的多余文件夹删掉,仅留下Scripts和Web.config: 将Scripts文件夹改名为我们熟悉的js(也可以不改,仅推荐改),并新建文件夹css和image,并在对应位置添加页面,html.css.js 将上图鼠标所指的.min.js文件拖动到html中,将自己新建的js文件拖动到它下方,如图: *两者上下位置关系千万别弄饭了,min.js一定要在最上面. 将Script文件夹中的第一个js文件(_references.j

2015.7.17 第八课 课程重点(js语句:条件、循环)

1.条件语句: (1)比较操作符: ==:判断是否相等 !=:判断是否不相等 > :判断是否大于 >=:判断是否大于等于 < :判断是否小于 <=:判断是否小于等于 [例1] if(iNum1==iNum2) //如果iNum1与iNum2相等 { iNum3=iNum1; //将iNum1的值赋给iNum3 } else{  //否则 iNum3=iNum2;  //将iNum2的值赋给iNum3 } [补充]以上也可写作: iNum3 = iNum1==iNum2 ? iNum

2015.7.14 第六课 课程重点(仿站及常见代码用法)

1.网站常见小图标调用方式: 将所有小图标做在一张大图上a.png,然后根据横纵轴来调用. background:url("a.png") -23px -70px no-repeat; 2.块级元素居中的常见写法: margin:0px auto; 3.如何让超链接影响到整个块? 将行内元素变成块级元素:display:block 4.文本框只留下面一条线: { border-width:0px;  border-bottom:solid 1px #000; } 5.仿站: 用所学知识

2015.7.13 第五课 课程重点(z-index、overflow、浏览器兼容性)

1.z-index=数字 z轴的值,当几个div重叠时,z-index数字越大的,越在上面 2.overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条) 3.浏览器兼容性问题: (1)兼容性问题:不同的浏览器基于不同的内核,对一些前端代码支持不一样,导致显示效果不一样 (2)测试的各大浏览器:IE7-IE11(可使用IETester,不考虑IE6).Opera.Safari.Chrome.Firefox (3)关于兼容性非常好的介绍文章:http

2015.7.9 第四课 课程重点(浮动、盒子模型、绝对/相对定位)

1.块级元素的特点: (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角 (2)块级元素,默认情况下,单独占满一行. 常用的块级元素:div.p.h1-h6.hr.ul li.ol li.table.body... 2.浮动:float 作用:通过漂浮,让块级元素实现并排 float:left 或 right 注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动 清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动

2015.7.8 第三课 课程重点

1.css选择器:相当于一个标识,有3种选择器 第一种选择器:标签选择器 p{ color:red;} 第二种选择器:class选择器 .c1{ color:green;} 可被多次调用 第三种选择器:id选择器 #d1{ color:blue;} 独有 优先级:标签<class<id 注意:一个标签可以有多个class,但是只能有一个id 2.css文字效果: 字体:font-family 字号:font-size 颜色:color 粗体:font-weight 下划线:text-decor

2015.7.15 第七课 课程重点(js、声明变量、数据类型)

1.vs新建步骤 文件——新建项目——web——空白web应用程序——取名.位置.确定——此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目. 点击项目——新建文件夹css和js和image——新建html页面取名demo1 (推荐设置:工具——选项——可以设置下字体和颜色:文本编辑器——把常用的几种语言设上行号颜色提示) 2.什么是js JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中

第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引