-
<script type="text/javascript"> //找到每一个dd下面的一个p元素，并改变颜色 //可以通过子类选择器 p:first-child 筛选出每一个dd中的的第一个a元素 $("dd p:first-child").css('color','#9932CC'); </script> <script type="text/javascript"> //把a元素从顺序1-5加上颜色 //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素 //注意了index是从0开始计算，所以选在1-5,为对应的index就是4 $("a:lt(4)").css('color','red'); </script> <script type="text/javascript"> //在所有a元素中找到属性名name="setColor"的元素，并设置颜色 //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素 $("a[name='setColor']").css('color','blue'); </script> <script type="text/javascript"> //选中2个dd列表中第10个元素，并改变颜色 //这里用了nth-child 选择的他们所有父元素的第n个子元素 $("dd a:nth-child(10)").css('color','#66CD00'); </script> <script type="text/javascript"> //找到把a元素中包含文字"更多"的节点，改变颜色 $("a:contains('更多')").css('color','#C71585'); </script> </script>查看全部
-
$("div(...)[attribute='value']") 指定字符串等于给定字符串或以该字符串为前缀的元素 $("div(...)[attribute*='value']") 选择指定属性包含一个指定的子字符串的元素 $("div(...)[attribute~='value']") 选择指定属性用空格分隔的值中包含一个给定值的元素 $("div(...)[attribute='value']") 选择指定属性是给定值的元素 $("div(...)[attribute^='value']") 选择指定属性包含一个给定字符串开始的元素 $("div(...)[attribute$='value']") 选择指定属性包含一个给定字符串结尾的元素，这个是区分大小写的 $("div(...)[attribute]")选择所有具有指定属性的元素查看全部
-
查找所有div中，属性name=p1的div元素 $("div[name=p1]") 查找所有div中，有属性p2的div元素 $("div[p2]") 查找所有div中，有属性name中的值只包含一个连字符“-”的div元素 $("div[name='-']") 查找所有div中，有属性name中的值包含一个连字符“空”的div元素 $("div[name~='a']") 查找所有div中，属性name的值是用imooc开头的 $("div[name^=imooc]") 查找所有div中，属性name的值是用imooc结尾的 $("div[name$=imooc]") 查找所有div中，有属性name中的值包含一个test字符串的div元素 $("div[name*='test']") 查找所有div中，有属性testattr中的值没有包含"true"的div $("div[testattr!='true']")查看全部
-
DOM对象转化成jQuery对象 相比较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方法查找第一个元素并且改变其颜色。查看全部
-
通过jQuery自带的get()方法 jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引： var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 div.style.color = 'red' //操作dom对象的属性 其实我们翻开源码，看看就知道了，get方法就是利用的第一种方式处理的，只是包装成一个get让开发者更直接方便的使用。查看全部
-
代码分析： $(document).ready 的意思是等页面的文档（document）中的节点都加载完毕后，在执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。查看全部
-
$(".div:contains(span)").css("color", "blue");//包含关键字span的div<br> $(".div:has(span)").css("color", "blue");//包含标签span的div $(".div:parent").css("color", "blue")//选择已经当爹的div $(".div:empty").css("color", "blue")//选择空巢的div查看全部
-
注意事项： :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。 :parent与:empty是相反的，两者所涉及的子元素，包括文本节点查看全部
-
//:eq 选着单个 $(".aaron:eq(2)").css("border", "3px groove blue"); </script> <script type="text/javascript"> //:gt 选择匹配集合中所有索引值大于给定index参数的元素 $(".aaron:gt(3)").css("border", "3px groove orange"); </script> <script type="text/javascript"> //:lt 选择匹配集合中所有索引值小于给定index参数的元素 //与:gt相反 $(".aaron:lt(2)").css("color", "#CD00CD");查看全部
-
$('div > p') 选择所有div元素里面的第一个子元素P $('div p') 选择所有div元素里面的p元素 //选取class为prev后面的第一个的div兄弟节点 $(".prev+div").css("border", "3px groove blue"); //选取prev后面的所有的div兄弟节点 $(".prev~div").css("border", "3px groove blue");查看全部
-
.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类 .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名 .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除 .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值 .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数 注意事项： toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加 toggleClass会保留原有的Class名后新增，通过空格隔开查看全部
-
删除样式.removeClass() jQuery通过.addClass()方法可以很便捷的增加样式。如果需要样式之间的切换，同样jQuery提供了一个很方便的.removeClass()，它的作用是从匹配的元素中删除全部或者指定的class .removeClass( )方法 .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名 .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名 注意事项 如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除查看全部
-
.addClass( className )方法 .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名 .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名 注意事项： .addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上 简单的描述下：在p元素增加一个newClass的样式 <p class="orgClass"> $("p").addClass("newClass") 那么p元素的class实际上是 class="orgClass newClass"样式只会在原本的类上继续增加，通过空格分隔查看全部
-
.val() jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。 .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()都可以使用回调函数的返回值来动态的改变多个元素的内容。查看全部
-
jquery 对象转换为 dom元素 方法一：通过数组的下标；//div=div[0]; 方法二：通过get()方法；//div=div.get(下标)查看全部
举报
0/150
提交
取消