-
jQuery提供的存储接口 jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 .data( key, value ) //实例接口,存数据 .data( key ) //实例接口,存数据 <script type="text/javascript"> $('.left').click(function() { var ele = $(this);通过$.data方式设置数据 $.data(ele, "a", "data test") $.data(ele, "b", {name : "慕课网"})通过$.data方式取出数据 var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name ele.find('span').append(reset) <script type="text/javascript"> $('.right').click(function() { var ele = $(this);通过.data方式设置数据 ele.data("a", "data test") ele.data("b", { name: "慕课网"})通过.data方式取出数据 var reset = ele.data("a") + "</br>" + ele.data("b").name ele.find('span').append(reset) 2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。 我们把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在循环引用的内存泄漏风险 通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了 同样的也提供2个对应的删除接口，使用上与data方法其实是一致的 jQuery.removeData( element [, name ] ) .removeData( [name ] )查看全部
-
.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类 1:.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名 //给所有的tr元素加一个class="c"的样式 $("#table tr").toggleClass("c"); //给所有的偶数tr元素切换class="c"的样式 //所有基数的样式保留，偶数的被删除 $("#table tr:odd").toggleClass("c"); 2:.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除 //第二个参数判断样式类是否应该被添加或删除 //true，那么这个样式类将被添加; //false，那么这个样式类将被移除 //所有的奇数tr元素，应该都保留class="c"样式 $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的 3:.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值 4:.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数 注意事项： toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加 toggleClass会保留原有的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' })查看全部
-
.css()方法：获取元素样式属性的计算值或者设置元素的CSS属性 获取:.css( pN ) ：获取匹配元素集合中的第一个元素的样式属性的计算值 .css( pN)：传递一组数组，返回一个对象结果 颜色都会转化成统一的rgb标示.background-color:blue; => rgb(0, 0, 255) $('p:eq(0)').text($('.first').css("background-color")) 字体大小都会转化成统px大小 em=>px $('p:eq(1)').text($('.first').css("font-size") 获取尺寸，传入CSS属性组成的一个数组{width:"60px",height:"60px"} var value = $('.first').css(['width','height']) $('p:eq(2)').text('widht:'+ value.width)因为获取的是一个对象，取到对应的值 设置： .css(pN, value):设置CSS .css(pN, ftion)：可以传入一个回调函数，返回取到对应的值进行处理 .css(properties)：可以传一个对象，同时设置多个样式 多种写法设置颜色 $('.fo').css("background-color","red") $('.fi').css("backgroundColor","yellow") 多种写法设置字体大小 var a="15px"; $('.fo').css("font-size", a) $('.fi').css("fontSize","0.9em") 获取到指定元素的宽度，在回调返回宽度值，重新设置新的宽度 $('.si').css("width",function(index,value){ value = value.split('px')value带单位，先分解 return (Number(value[0]) + 50) + value[1] 合并设置,通过对象传设置多个样式 $('.se').css({ 'font-size' :"15px","background-color" :"#40E0D0", "border" :"1px solid red"查看全部
-
class=left下div元素增加一个类名为newClass的样式 $('.left div').addClass('newClass') className(fucntion)方法 1：这个函数返回一个或更多用空格隔开的要增加的样式名。 2：接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容 3：找到所有的div，然后通过addClass设置颜色，根据返回的className的判断， $("div").addClass(function(index,className) { //找到类名中包含了imooc的元素 if(-1 !== className.indexOf('imooc')){ //this指向匹配元素集合中的当前元素 $(this).addClass('imoocClass') } }); </script>查看全部
-
val()方法 1:val()无参数，获取匹配的元素集合中第一个元素的当前值 2:.val( value )，设置匹配的元素集合中每个元素的值 3:val( function ) ，一个用来返回设置值的函数 例子： 单个select，返回第一个赋给p $("p").text( $("#single").val()) 多个select被选择，返回["imocc", "博客园"] $("p").text( $("#multiple").val() ) 选择一个表单，修改value的值 $("input[type='text']").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()都可以使用回调函数的返回值来动态的改变多个元素的内容。 注意事项： a：通过.val()处理select元素， 当没有选择项被选中，它返回null b：.val()方法多用来设置表单的字段的值 c:如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值查看全部
-
ml与.text的方法操作是一样，只是在具体针对处理对象不同 .html处理的是元素内容，.text处理的是文本内容 .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器 //.text()是文本内容的合集 $('p:last').text( $(".first-div").text() ) 通过.text()方法替换文本内容 $(".left a:first").text('替换第一个a元素的内容') 通过.html()方法替换html结构 $(".left div:first").html('整个div的子节点都被替换了') 通过.text()的回调，获取原本的内容，修改，在重新赋值 $(".left a:first").text(function(idnex,text){ return '增加新的文本内容' + text })查看全部
-
找到第一个input，通过attr设置属性value的值 $("input:first").attr('value','.attr( attributeName, value )') 找到第二个input，通过attr获取属性value的值 var s=$("input:eq(1)").attr('value') $("input:first").attr('value', s) 找到第三个input，通过使用一个函数来设置属性 //可以根据该元素上的其它属性值返回最终所需的属性值 //例如，我们可以把新的值与现有的值联系在一起： $("input:eq(2)").attr('value',function(i, val){ return '通过function设置' + val }) 找到第四个input，通过使用removeAttr删除属性 $("input:eq(3)").removeAttr('value')找到第一个input，通过attr设置属性value的值 $("input:first").attr('value','.attr( attributeName, value )') 找到第二个input，通过attr获取属性value的值 var s=$("input:eq(1)").attr('value') $("input:first").attr('value', s) 找到第三个input，通过使用一个函数来设置属性 //可以根据该元素上的其它属性值返回最终所需的属性值 //例如，我们可以把新的值与现有的值联系在一起： $("input:eq(2)").attr('value',function(i, val){ return '通过function设置' + val }) 找到第四个input，通过使用removeAttr删除属性 $("input:eq(3)").removeAttr('value')查看全部
-
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，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了 //var $this= $(this) $(this).css('color','blue'); })查看全部
-
查找所有input所有可用的（未被禁用的元素）input元素。 $('input:enabled').css("border", "2px groove red"); 查找所有input所有不可用的（被禁用的元素）input元素。 $('input:disabled').css("border", "2px groove blue"); 查找所有input所有勾选的元素(单选框,复选框) //删除这个勾选的元素 $('input:checked').removeAttr('checked') 查找所有option元素中,有selected属性被选中的选项 //删除这个选中的元素 $('option:selected').removeAttr('selected')查看全部
-
查找所有 input, textarea, select 和 button 元素 //:input 选择器基本上选择所有表单控件 $(':input').css("border", "1px groove red"); 匹配所有input元素中类型为text的input元素 $('input:text'.css("background", "#A2CD5A"); 匹配所有input元素中类型为password的input元素 $('input:password').css("background", "yellow"); 匹配所有input元素中的单选按钮,并选中 $('input:radio').attr('checked','true'); 匹配所有input元素中的复选按钮,并选中 $('input:checkbox').attr('checked','true'); 匹配所有input元素中的提交的按钮,修改背景颜色 $('input:submit').css("background", "#C6E2FF"); 匹配所有input元素中的图像类型的元素,修改背景颜色 $('input:image').css("background", "#F4A460"); 匹配所有input元素中类型为按钮的元素 $('input:button').css("background", "red"); 匹配所有input元素中类型为file的元素 $('input:file').css("background", "#CD1076");查看全部
-
查找所有class="first-div"下的a元素，只取第一个 //针对所有父级下的第一个 $('.first-div a:first-child').css("color", "#CD00CD"); 查找所有class="first-div"下的a元素，只取最后一个 //针对所有父级下的最后一个 //如果只有一个元素的话，last也是第一个元素 $('.first-div a:last-child').css("color", "red"); 查找所有class="first-div"下的a元素，如果只有一个子元素的情况 $('.first-div a:only-child').css("color", "blue"); 查找所有class="last-div"下的a元素,选择第二个 $('.last-div a:nth-child(2)').css("color", "#CD00CD"); 查找所有class="last-div"下的a元素,选择第倒数第二个 $('.last-div a:nth-last-child(2)').css("color", "red");查看全部
-
查找所有div中，属性name=p1的div元素 $('div[name=p1]').css("border", "3px groove red"); 查找所有div中，有属性p2的div元素 $('div[p2]').css("border", "3px groove blue"); 查找所有div中，有属性name中的值包含一个连字符“-”的div元素 $('div[name|="a"]').css("border", "3px groove #00FF00"); 查找所有div中，有属性name中的值包含一个连字符“空”的div元素 $('div[name~="a"]').css("border", "3px groove #668B8B"); <div class="div" testattr="true" name="a b"> <a>[att~=val]</a> </div> 查找所有div中，属性name的值是用imooc开头的 $('div[name^=imooc]').css("border", "3px groove red"); 查找所有div中，属性name的值是用imooc结尾的 $('div[name$=imooc]').css("border", "3px groove blue"); 查找所有div中，有属性name中的值包含一个test字符串的div元素 $('div[name*="test"]').css("border", "3px groove #00FF00"); 查找所有div中，有属性testattr中的值没有包含"true"的div $('div[testattr!="true"]').css("border", "3px groove #668B8B");查看全部
-
查找所有class='div'中DOM元素中包含"contains"的元素节点,并且设置颜色 $(".div:contains(':contains')").css("color", "#CD00CD"); 查找所有class='div'中DOM元素中包含"span"的元素节点.并且设置颜色 $(".div:has(span)").css("color", "blue"); 选择所有a元素，找到对应的父元素.增加一个蓝色的边框 $("a:parent").css("border", "3px groove blue"); 找到a元素下面的所有空节点(没有子元素).增加一段文本与边框 $("a:empty").text(":empty").css("border", "3px groove red");查看全部
-
找到第一个div $(".div:first").css("color", "#CD00CD"); 找到最后一个div $(".div:last").css("color", "#CD00CD"); :even 选择所引值为偶数的元素，从 0 开始计数 $(".div:even").css("border", "3px groove red"); :odd 选择所引值为奇数的元素，从 0 开始计数 $(".div:odd").css("border", "3px groove blue"); :eq/:gt/:lt :eq选着单个 $(".aaron:eq(2)").css("border", "3px groove blue"); :gt 选择匹配集合中所有索引值大于给定index参数的元素 $(".aaron:gt(3)").css("border", "3px groove blue"); :lt 选择匹配集合中所有索引值小于给定index参数的元素与:gt相反 $(".aaron:lt(2)").css("color", "#CD00CD"); :not 选择所有元素去除不匹配给定的选择器的元素 选取所有input中,没有checked属性的p元素，赋予颜色 $("input:not(:checked) + p").css("background-color", "#CD00CD");查看全部
举报
0/150
提交
取消