-
jQuery的属性与样式之删除样式.removeClass() jQuery通过.addClass()方法可以很便捷的增加样式。如果需要样式之间的切换，同样jQuery提供了一个很方便的.removeClass()，它的作用是从匹配的元素中删除全部或者指定的class .removeClass( )方法 1）.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名 2）.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名 注意事项 如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除 例如： <script type="text/javascript"> //class=left下div元素删除newClass样式 $('.left div').removeClass('newClass') </script> <script type="text/javascript"> //.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式 $('.right > div:first').removeClass(function(index,className){ //className = aa bb imoocClass //把div的className赋给下一个兄弟元素div上作为它的class $(this).next().addClass(className) //删除自己本身的imoocClass return 'imoocClass' })查看全部
-
jQuery的属性与样式之增加样式.addClass() .addClass( className )方法 1）.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名 2）.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名 注意事项： .addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上 简单的描述下：在p元素增加一个newClass的样式 <p class="orgClass"> $("p").addClass("newClass") 那么p元素的class实际上是 class="orgClass newClass"样式只会在原本的类上继续增加，通过空格分隔查看全部
-
jQuery的属性与样式之.val() jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。 .val()方法 1).val()无参数，获取匹配的元素集合中第一个元素的当前值 2).val( value )，设置匹配的元素集合中每个元素的值 3).val( function ) ，一个用来返回设置值的函数 注意事项： 1)通过.val()处理select元素， 当没有选择项被选中，它返回null 2).val()方法多用来设置表单的字段的值 3)如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值 .html(),.text()和.val()的差异总结： 1).html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。 2).html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。 3).html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。查看全部
-
$("div").addClass(function(index,className) { //找到类名中包含了imooc的元素 if(-1 !== className.indexOf('imooc')){ //this指向匹配元素集合中的当前元素 $(this).addClass('imoocClass') } }); index,calssname 是从那里传到函数里面的啊 快来回答问题，最佳答案可 +2积分 什么是积分？ 2016-11-08 源自：jQuery基础 (一)—样式篇... 3-4 316 浏览 3 回答 angeliuwj4109780 首先$("div")获取所有div，index则代表div对应的索引位置，第一个div索引位置为0，第二个div索引位置为1，依次类推。而className代表对应div的的类名，即div class=" "中的类名。 2016-11-09 回复 5 qq_不解释_24365909 index = 第几个"div" classname = 这个"div"本身的类名查看全部
-
jQuery的属性与样式之html()及.text() .html()方法 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法： 1）.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容 2）.html( htmlString ) 设置每一个匹配元素的html内容 3）.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数 .html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容） .text()方法 得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法： 1）.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代 2）.text( textString ) 用于设置匹配元素内容的文本 3）.text( function(index, text) ) 用来返回设置文本内容的一个函数 .text()结果返回一个字符串，包含所有匹配元素的合并文本 .html与.text的异同: 1）.html与.text的方法操作是一样，只是在具体针对处理对象不同 2）.html处理的是元素内容，.text处理的是文本内容 3）.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用 4）如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的 5）火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器查看全部
-
jQuery的属性与样式之.attr()与.removeAttr() 操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题 jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr() attr()有4个表达式 1）attr(传入属性名)：获取属性的值 2）attr(属性名, 属性值)：设置属性的值 3）attr(属性名,函数值)：设置属性的函数值 4）attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … } removeAttr()删除方法 .removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute） 注意的问题： dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性 例如：html中常用的id、class、title、align等： <div id="immooc" title="慕课网"></div> 而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等 获取Attribute就需要用attr，获取Property就需要用prop查看全部
-
综合案例 例如： <script type="text/javascript"> //找到男装下第一类衣服中的第一个p元素，并改变颜色 //可以通过子类选择器 p:first-child 筛选出第一个p元素 $("#menu_con div.tag dd > p:first-child").css('color','#9932CC'); </script> <script type="text/javascript"> //找到男装下第一类衣服把a元素从顺序1-4加上颜色 //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素 //注意了index是从0开始计算，所以选在1-4,为对应的index就是4 $("#menu_con > div:first dd:eq(0) > a:lt(4)").css('color','red'); </script> <script type="text/javascript"> //找到男装所有a元素中属性名name="setColor"的元素，并设置颜色 //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素 $("#menu_con a[name='setColor']").css('color','blue'); </script> <script type="text/javascript"> //不分男女，选中第一类衣服中第9个a元素，并改变颜色 //这里用了nth-child 选择的他们所有父元素的第n个子元素 $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00'); </script> <script type="text/javascript"> //找到女装下第一类衣服，把a元素中包含文字"更多"的节点，改变颜色 $(".tag:first a:contains('更多')").css('color','#C71585'); </script>查看全部
-
jQuery选择器之特殊选择器this this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。 $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。 例如： <script type="text/javascript"> var p1 = document.getElementById('test1') p1.addEventListener('click',function(){ //直接通过dom的方法改变颜色 this.style.color = "red"; },false); </script> <script type="text/javascript"> $('#test2').click(function(){ //通过包装成jQuery对象改变颜色 $(this).css('color','blue'); }) </script>查看全部
-
jQuery选择器之表单对象属性筛选选择器 $(":enabled") 选取可用的表单元素 $(":disabled") 选取不可用的表单元素 $(":checked") 选取被选中的<input>元素 $(":selected") 选取被选中的<option>元素 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素查看全部
-
jQuery选择器之表单元素选择器 jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素 表单选择器的具体方法描述： $(":input") 选择所有input，textarea，select和button元素。 $(":text") 匹配所有文本框 $(":password") 匹配所有密码框 $(":radio") 匹配所有的单选框 $(":checkbox") 匹配所有的复选框 $(":submit") 匹配所有的提交按钮 $(":image") 匹配所有的图像域 $(":reset") 匹配所有的重置按钮 $(":button") 匹配所有按钮 $(":file") 匹配所有文件域 除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')查看全部
-
jQuery选择器之子元素筛选选择器 $(":first-child") 选择所有父级元素下的第一个子元素 $(":last-child") 选择所父级元素下的最后一个子元素 $(":only-child") 如果某个子元素是其父元素的唯一子元素，那么它就会被选中 $(":nth-child") 选择它们所有父元素的第n个子元素 $(":nth-last-child") 选择所有它们父元素的第n个子元素，计数从最后一个元素开始到第一个 1）:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父元素匹配第一个子元素 相当于:nth-child(1); 2）:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素; 3）如果子元素只有一个的话，:first-child与:last-child是同一个； 4）:only-child匹配某个元素是父元素中唯一的子元素。 5）jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的 6）nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算查看全部
-
jQuery选择器之属性筛选选择器 属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。 在这么多属性选择器中[attr="value"]即包含某些值的元素和[attr*="value"]即给定值的元素，这两个是最实用的 [attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件查看全部
-
我们有几种方式可以隐藏一个元素： CSS display的值是none。 type="hidden"的表单元素。 宽度和高度都显式设置为0。 一个祖先元素是隐藏的，该元素是不会在页面上显示 CSS visibility的值是hidden CSS opacity的指是0查看全部
-
jQuery选择器之可见性筛选选择器 $(':visible')选择所有显示的元素 $(':hidden')选择所有隐藏的元素 :hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等 我们有几种方式可以隐藏一个元素： 1）CSS display的值是none。 2）type="hidden"的表单元素。 3）宽度和高度都显式设置为0。 4）一个祖先元素是隐藏的，该元素是不会在页面上显示 5）CSS visibility的值是hidden 6）CSS opacity的指是0 如果元素中占据文档中一定的空间,元素被认为是可见的。 可见元素的宽度或高度，是大于零。 元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。查看全部
-
子元素jQuery选择器不难，只需要知道空格是后代选择器就可以了，另外像 :first-child, :last-child等是css伪类。查看全部
举报
0/150
提交
取消