为了账号安全,请及时绑定邮箱和手机立即绑定
  • $(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。
    查看全部
  • 子选择器: $('div > p') 后代选择器: $('div p') 相邻兄弟选择器: $(".prev + div") 一般选择器: $(".prev ~ div")
    查看全部
  • 1、子元素筛选选择器不常使用,其筛选规则比起其它的选择器稍微要复杂点 (1)描述表: $(":first-child") ==》 选择所有父级元素下的第一个子元素 $(":last-child") ==》 选择所有父级元素下的最有一个子元素 $(":only-child") ==》 选择某个元素是其父元素的唯一子元素,那么它就会被选中 $(":nth-child") ==》 选择的他们所有父元素的第n个子元素 $(":nth-last-child") ==》 选择所有他们父元素的第n个子元素,计数从最后一个元素开始到第一个 注意: ①:first只匹配一个单独的元素,但是:first-child选择器可以匹配多个。即为每个父级元素匹配第一个子元素。这相当于:nth-child(1) ②:last只匹配一个单独的元素,:last-child 选择器可以匹配多个元素。即为每个父级元素匹配最后一个子元素 ③如果子元素只有一个的话,:first-child与:last-child是同一个 ④:only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配 ⑤jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的 ⑥:nth-child(n)与:nth-last-child(n)的区别前者是从前往后计算,后者从后往前计算
    查看全部
  • $也是一个对象,是jQuery对象的简写,$("div")也可以写成jQuery("div")。 在控制台里输入 alert($),会弹出 function (e,t){return new b.fn.init(e,t,r)},意味着$,也就是jQuery,是一个函数对象。
    查看全部
    0 采集 收起 来源:环境搭建

    2018-03-22

  • jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素。 利用数组下标的方式读取到jQuery中的DOM对象 var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性 通过jQuery自带的get()方法 var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法,转化成DOM对象 div.style.color = 'red' //操作dom对象的属性
    查看全部
  • 1、属性筛选选择器 (1)描述如下: $(":[attribute = 'value']") 选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素 $(":[attribute *= 'value']") 选择指定属性具有包含一个给定的子字符串的元素。(选择给定的属性是以包含某些值得元素) $(":[attribute ~= 'value']") 选择指定属性用空格分隔的值中包含一个给定值得元素。 $(":[attribute = 'value']") 选择指定属性是给定值得元素 $(":[attribute != 'value']") 选择不存在指定属性,或者指定的属性值不等于给定值得元素 $(":[attribute ^= 'value']") 选择指定属性是以给定字符串开始的元素 $(":[attribute $= 'value']") 选择指定属性是以给定值结尾的元素。这个比较是区分大小写的 $(":[attribute]") 选择所有具有指定属性的元素,该属性是可以是任何值 $(":[attributeFilter1][attributeFilterN]") 选择匹配所有指定的属性筛选器的元素 (2)浏览器支持: ①[att=val]、[att]、[att=val]、[att~=val]属于CSS 2.1规范 ②[nsattr]、[att^=val]、[att*=val]、[att$=val]属于CSS3规范 ③[name!="value"] 属于jQuery 扩展的选择器 (3)CSS选择器无论CSS2.1版本还是CSS3版本,IE7和IE8都支持,webkit、Gecko核心及Opera也都支持,只有IE6以下浏览器才不支持 (4)在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 ①[attr="value"]:能定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 ②[attr*="value"]:能在网站中帮助我们匹配不同类型的文件
    查看全部
  • 1、可见性筛选选择器 元素有显示状态与隐藏状态,jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden (1)描述如下: $(":visible") 选择所有显示的元素 $(":hidden") 选择所有隐藏的元素 这2个选择器都是jQuery延伸出来的,看起来比较简单,但是元素可见性依赖于适用的样式 :hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等 2、有几种方式可以隐藏一个元素 (1)CSS中display的值是none。 (2)type="hidden"的表单元素。 (3)宽度和高度都显式设置为0。 (4)一个祖先元素是隐藏的,该元素是不会在页面上显示 (5)CSS中visibility的值是hidden (6)CSS中opacity的指是0 3、可见的元素 (1)如果元素中占据文档中一定的空间,元素被认为是可见的。 (2)可见元素的宽度或高度,是大于零。 (3)元素的visibility:hidden 或opacity:0被认为是可见的,因为他们仍然占用空间布局。 4、不在文档中的元素是被认为是不可见的,如果当他们被插入到文档中,jQuery没有办法知道他们是否是可见的,因为元素可见性依赖于适用的样式
    查看全部
  • jQuery提供的存储接口 jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 .data( key, value ) //实例接口,存数据 .data( key ) //实例接口,存数据 2个方法在使用上存取都是通一个接口,传递元素,键值数据。在jQuery的官方文档中,建议用.data()方法来代替。 我们把DOM可以看作一个对象,那么我们往对象上是可以存在基本类型,引用类型的数据的,但是这里会引发一个问题,可能会存在循环引用的内存泄漏风险 通过jQuery提供的数据接口,就很好的处理了这个问题了,我们不需要关心它底层是如何实现,只需要按照对应的data方法使用就行了 同样的也提供2个对应的删除接口,使用上与data方法其实是一致的,只不过是一个是增加一个是删除罢了 jQuery.removeData( element [, name ] ) .removeData( [name ] )
    查看全部
  • html5 dataset是新的HTML5标准,允许你在普通的元素标签里嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由JavaScript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中,我们如何实现数据存取? jQuery就提供了一个.data()的方法来处理这个问题 使用jQuery初学者一般不是很关心data方式,这个方法是jquery内部预用的,可以用来做性能优化,比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了,常常用于我们存放临时的一些数据,因为它是直接跟DOM元素对象绑定在一起的 jQuery提供的存储接口 jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 .data( key, value ) //实例接口,存数据 .data( key ) //实例接口,存数据
    查看全部
  • 1、内容筛选选择器 基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上。 (1)内容过滤器描述如下表: $(":contains(text)") 查找包含“指定文本”的元素。文本不用加双引号。 如果匹配的文本包含在元素的子元素中,同样认为是符合条件的。 $(":parent") 选择父级元素 $(":empty") 选择没有子元素的元素 $(":has(selector)") 查找包含“指定元素”的元素 注意: ①:contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素。 ②如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。 ③:parent与:empty是相反的,两者所涉及的子元素,包括文本节点。
    查看全部
  • 1、基本筛选选择器 (1)筛选选择器的用法与CSS中的伪元素相似,选择器用冒号“:”开头,通过一个列表,看看基本筛选器的描述: $(":first") 第一个 $(":last") 最后一个 $(":not(selector)") selector是给定的选择器(筛选的条件),所有不符合这个选择器的,将被选中。 $(":eq(index)") 在匹配的集合中选择索引值为index的元素。 $(":even") 选择索引值为偶数的元素,从0开始计数。 $(":odd") 选择索引值为奇数的元素,从0开始计数。 $(":gt(index)") 选择匹配集合中,所有大于给定index(索引值)的元素。 $(":lt(index)") 选择匹配集合中,所有小于给定index(索引值)的元素。 $(":header") 选择所有标题元素,eg:h1~h6 $(":lang(language)") 选择指定语言的所有元素。 $(":root") 选择该文档的根元素。 $(":animated") 选择所有正在执行动画效果的元素。 注意: :eq(),:lt(),:gt(),:even,:odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意jQuery合集都是从0开始索引 gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始
    查看全部
  • 1、层级选择器 文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了。 2、选择器中的层级选择器就是用来处理这种关系 子元素、后代元素、兄弟元素、相邻元素 (1)仔细观察层级选择器之间还是有很多相似与不同点 ①层级选择器都有一个参考节点 ②后代选择器包含子选择器的选择的内容 ③一般兄弟选择器包含相邻兄弟选择的内容 ④相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下
    查看全部
  • 1、全选择器(*选择器) 在CSS中,经常会在第一行写下这样一段样式:* {padding: 0; margin: 0;} 通配符*:给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素。 $( "*" ) (1)如果要获取文档中所有的元素,通过document.getElementsByTagName()中传递"*"同样可以获取到 (2)id、class、tag都可以通过原生的方法获取到对应的节点,但是我们还需要考虑一个兼容性的问题,比如: ①IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的 ②getElementById的参数在IE8及较低的版本不区分大小写 ③IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A ④IE8及较低的版本,浏览器不支持getElementsByClassName 2、对jQuery的实现感兴趣,可以看另一个门课程《jQuery源码解析》
    查看全部
  • $(":first") 第一个<br> $(":last") 最后一个<br> $(":not(selector)") selector是给定的选择器(筛选的条件),所有不符合这个选择器的,将被选中。<br> $(":eq(index)") 在匹配的集合中选择索引值为index的元素。<br> $(":even") 选择索引值为偶数的元素,从0开始计数。<br> $(":odd") 选择索引值为奇数的元素,从0开始计数。<br> $(":gt(index)") 选择匹配集合中,所有大于给定index(索引值)的元素。<br> $(":lt(index)") 选择匹配集合中,所有小于给定index(索引值)的元素。<br> $(":header") 选择所有标题元素,eg:h1~h6<br> $(":lang(language)") 选择指定语言的所有元素。<br> $(":root") 选择该文档的根元素。<br> $(":animated") 选择所有正在执行动画效果的元素。<br> <br> 注意:所有jQuery合集都是从0开始索引。<br> <br> html代码: <div> <input type="checkbox"><br> <p>段落</p><br> </div> 所有input中,没有checked属性的input,选择它的同级元素P:<br> $("input:not(:checked) + p")<br> :checked是个选择器,not(:checked)不符合这个选择器的
    查看全部
  • 1.$("div > p")选择所有div里面的第一个子元素P。即在所有div的儿子元素中寻找第一个P。 例子中:<div class="imooc"> <article> <p>div下的article下的p元素</p> </article> </div> 因为P是div的孙子元素,所以没有被选中。 2.相邻兄弟选择器 $(".prev + div") 根据.prev后面紧跟的标签来定 “+” 后面的内容 。如果.prev后面紧跟的是<span></span> 那么这里应该写$(".prev + span"); 3.一般兄弟选择器 记住写法:$(".prev ~ div") 飘号后面的内容,根据想选择的标签来定。 若想选取.prev后面的所有span兄弟节点,应该写 $(".prev ~ span")
    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的基础语法 2、jQuery当中的选择器 3、jQuery中的属性和样式

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!