-
$("#menu_con div.tag dd > p:first-child") 这段组合的选择器表达式用到了几个之前学到的选择器：ID、Class、元素、层级、子元素筛选器 当用到筛选器 :first-child的时候我们就知道了，这肯定是一组合集，意味着p元素是有多个，而且是分布在不同父元素dd里面的查看全部
-
假如给页面一个P元素绑定一个事件: p.addEventListener('click',function(){ //this === p //以下两者的修改都是等价的 this.style.color = "red"; p.style.color = "red"; },false); 通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可 this.style.color = "red" 但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象 换成jQuery的做法： $('p').click(function(){ //把p元素转化成jQuery的对象 var $this= $(this) $this.css('color','red') }) 通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了 总体： this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。 $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。查看全部
-
除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]') 任务 在代码编辑器中第38行填写相应代码 $(':input') 在代码编辑器中第43行填写相应代码 $('input:text') 在代码编辑器中第48行填写相应代码 $('input:password') 在代码编辑器中第53行填写相应代码 $('input:radio') 在代码编辑器中第58行填写相应代码 $('input:checkbox') 在代码编辑器中第63行填写相应代码 $('input:submit') 在代码编辑器中第68行填写相应代码 $('input:image') 在代码编辑器中第73行填写相应代码 $('input:button')查看全部
-
浏览器支持： [att=val]、[att]、[att=val]、[att~=val] 属于CSS 2.1规范 [nsattr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范 [name!="value"] 属于jQuery 扩展的选择器 CSS选择器无论CSS2.1版本还是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下浏览器才不支持 在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 任务 在代码编辑器中第31行填写相应代码 $('div[name=p1]') 在代码编辑器中第36行填写相应代码 $('div[p2]') 在代码编辑器中第41行填写相应代码 $('div[name="-"]') 在代码编辑器中第46行填写相应代码 $('div[name~="a"]') 在代码编辑器中第69行填写相应代码 $('div[name^=imooc]') 在代码编辑器中第74行填写相应代码 $('div[name$=imooc]') 在代码编辑器中第79行填写相应代码 $('div[name*="test"]') 在代码编辑器中第84行填写相应代码 $('div[testattr!="true"]')查看全部
-
:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等 我们有几种方式可以隐藏一个元素： CSS display的值是none。 type="hidden"的表单元素。 宽度和高度都显式设置为0。 一个祖先元素是隐藏的，该元素是不会在页面上显示 CSS visibility的值是hidden CSS opacity的指是0 如果元素中占据文档中一定的空间,元素被认为是可见的。 可见元素的宽度或高度，是大于零。 元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。 不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式 任务 在代码编辑器中第46行填写相应代码 $('#div1:visible') 在代码编辑器中第51行填写相应代码 $('#div2:visible') 在代码编辑器中第56行填写相应代码 $('#div3:visible') 在代码编辑器中第61行填写相应代码 $('#div1:hidden') 在代码编辑器中第66行填写相应代码 $('#div2:hidden') 在代码编辑器中第71行填写相应代码 $('#div3:hidden')查看全部
-
:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。 :parent与:empty是相反的，两者所涉及的子元素，包括文本节点 任务 在代码编辑器中第34行填写相应代码 $(".div:contains(':contains')") 在代码编辑器中第40行填写相应代码 $(".div:has(span)") 在代码编辑器中第62行填写相应代码 $("a:parent") 在代码编辑器中第68行填写相应代码 $("a:empty")查看全部
-
在代码编辑器中第38行填写相应代码 $(".div:first") 在代码编辑器中第43行填写相应代码 $(".div:last") 在代码编辑器中第48行填写相应代码 $(".div:even") 在代码编辑器中第53行填写相应代码 $(".div:odd") 在代码编辑器中第80行填写相应代码 $(".aaron:eq(2)") 在代码编辑器中第86行填写相应代码 $(".aaron:gt(3)") 在代码编辑器中第92行填写相应代码 $(".aaron:lt(2)") 在代码编辑器中第113行填写相应代码 $("input:not(:checked) + p")查看全部
-
在代码编辑器中第37行填写相应代码 $('div > p') 在代码编辑器中第43行填写相应代码 $('div p') 在代码编辑器中第62行填写相应代码 $(".prev + div") 在代码编辑器中第68行填写相应代码 $(".prev ~ div")查看全部
-
元素选择器：根据给定（html）标记名称选择所有的元素 描述： $( "element" ) 搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持 右边编辑器代码所示： 第一组：通过getElementsByTagName方法得到页面所有的<div>元素 var divs = document.getElementsByTagName('div'); divs是dom合集对象，通过循环给每一个合集中的<div>元素赋予新的boder样式 第二组：同样的效果，$("p")选取所有的<p>元素，通过css方法直接赋予样式查看全部
-
$( ".class" ) 类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选 同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的 右边实现一个原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较 我们不难发现： jQuery除了选择上的简单，而且没有再次使用循环处理 不难想到$(".imooc").css()方法内部肯定是带了一个隐式的循环处理，所以使用jQuery选择节点，不仅仅只是选择上的简单，同时还增加很多关联的便利操作，后续我们还会慢慢的学到其他的优势。查看全部
-
id选择器：一个用来查找的ID，即元素的id属性 $( "#id" ) id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器查看全部
-
ar div = document.getElementsByTagName('div'); //dom对象 var $div = $(div); //jQuery对象 var $first = $div.first(); //找到第一个div元素 $first.css('color', 'red'); //给第一个元素设置颜色 通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。查看全部
-
JavaScript代码 var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性 用jQuery找到所有的div元素（3个），因为jQuery 对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象然后调用它style属性然修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0 通过jQuery自带的get()方法 jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引： var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 div.style.color = 'red' //操作dom对象的属性查看全部
-
var $p = $('#imooc'); $p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');查看全部
-
jQuery是一个类数组对象，DOM对象就是一个单独的DOM元素。查看全部
举报
0/150
提交
取消