-
子元素筛选选择器（n从1开始）： $(":first-child")：如果指定元素为其父元素的首个子元素，则选中 $(":last-child")：如果指定元素为其父元素的末个子元素，则选中 $(":only-child")：如果指定元素是其父元素唯一子元素，则选中 $(":nth-child(n)")：如果指定元素为其父元素的第n个子元素，则选中 $(":nth-last-child(n)")：如果指定元素为其父元素的倒数第n个子元素，则选中 备注：选择所有父元素下符合条件的子元素查看全部
-
属性选择器： $("[<attr>]")：选择含有attr属性的元素 $("[<attr> = '<val>']")：选择attr属性值是val的元素 $("[<attr> != '<val>']")：选择不存在attr属性或attr值不等于val的元素（JQ特有） $("[<attr> ^= '<val>']")：选择以val开头的attr属性值的元素 $("[<attr> $= '<val>']")：选择以val结尾的attr属性值的元素，val区分大小写 $("[<attr> |= '<val>']")：选择attr属性值以val-为前缀或者等于val的元素 $("[<attr> *= '<val>']")：选择attr属性值包含val的元素 $("[<attr> ~= '<val>']")：选择attr属性值中用空格分隔开的属性值中有一个值是val的元素 $("[<attrFilter1>][<attrFilterN>]")：选择匹配所有属性筛选器的元素查看全部
-
可见性筛选选择器： $(":visible")：选择所有显示的元素 $(":hidden")：选择所有隐藏的元素 备注： 如果元素占据文档中一定的空间，则元素被认为是可见的。 visibility:hidden和opacity:0的元素仍然占据空间布局，因而被认为是可见的。 display:none、type='hidden'、width=0&height=0、祖先隐藏的元素是隐藏的。查看全部
-
内容筛选选择器： $(":contains(<text>)")：选择所有包含指定文本的元素（子元素包含文本也符合条件） $(":has(<selector>)")：选择元素中至少包含指定选择器的元素 $(":parent")：选择所有含有子元素或文本的元素 $(":empty")：选择所有没有子元素的元素（包含文本节点）查看全部
-
基本筛选选择器： $(":first")：匹配第一个元素 $(":last")：匹配最后一个元素 $(":not(<selector>)")：选择所有元素去除不匹配给定的选择器元素 $(":eq(<index>)")：在匹配的集合中选择索引值为index的元素 $(":gt(<index>)")：选择匹配集合中所有大于给定index $(":lt(<index>)")：选取匹配集合中所有索引值小于给定index参数的元素 $(":even")：选取索引值为偶数的元素，从0开始计数 $(":odd")：选取索引值为奇数的元素，从0开始计数 $(":header")：选择所有标题元素，像h1、h2、h3等 $(":lang(<language>)")：选择指定语言的所有元素 $(":root")：选择该文档的根元素 $(":animated")：选择所有正在执行动画的元素查看全部
-
$('.aaron,.imooc').css("border", "3px solid red"); class选择器可以选择多个元素，但是他们之间要用逗号隔开查看全部
-
相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。 如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象 通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了 HTML代码 <div>元素一</div> <div>元素二</div> <div>元素三</div> JavaScript代码 var 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方法查找第一个元素并且改变其颜色。查看全部
-
ID选择器：$("#id") 类选择器：$(".class") 元素选择器：$("tag") 全选择器：$("*") 层级选择器： $("parent > child") ：子选择器，选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant")：后代选择器，选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。 $("prev + next")：相邻兄弟选择器，选择所有紧接在“prev”元素后的“next”元素。 $("prev ~ siblings")：一般兄弟选择器，匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。查看全部
-
jQuery的处理： var $p = $('#imooc'); $p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red'); 通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。 通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现： 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。查看全部
-
这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别在于 2.x 不再兼容 IE6、7、8浏览器，这样做的目的是为了兼容移动端开发。由于减少了一些代码，使得该版本比 jQuery 1.x 更小、更快。 如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。我们这本课程为了兼容性问题，使用的是 1.9 版本。jQuery 每一个系列版本分为：压缩版(compressed) 与 开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。 jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面 <head> 标签内中，通过 script 标签引入 jQuery 库即可。查看全部
-
可见性筛选选择器： $(":visible")选择所有显示的元素 $(":hidden")选择所有隐藏的元素查看全部
-
内容选择器： $(".div:contains(':contains')") 选择包含文本:contains的class=div的元素 注意：内外引号不可同时为单引号或同时为双引号 $(".div:has(span)") 选择含有span元素的class=div的元素 注意：has()括号里不要写引号 $("a:parent") 包含子元素a或内容a的元素 $("a:empty") 没有子元素或文本内容的a元素查看全部
-
.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性 获取： .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值 .css( propertyNames )：传递一组数组，返回一个对象结果 设置： .css(propertyName, value )：设置CSS .css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理 .css( properties )：可以传一个对象，同时设置多个样式 注意事项： 浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px .css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理 当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样查看全部
-
在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果 jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass .toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类 .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名 .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除 .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值 .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数 注意事项： toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加 toggleClass会保留原有的Class名后新增，通过空格隔开查看全部
-
.val()方法 .val()无参数，获取匹配的元素集合中第一个元素的当前值 .val( value )，设置匹配的元素集合中每个元素的值 .val( function ) ，一个用来返回设置值的函数 注意事项： 通过.val()处理select元素， 当没有选择项被选中，它返回null .val()方法多用来设置表单的字段的值 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值 .html(),.text()和.val()的差异总结： .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。 .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。查看全部
举报
0/150
提交
取消