• JQuery 常用属性方法汇总


    1 .addClass()

    添加指定的类到匹配元素集合中的每一个元素。

    1、.addClass(className)

    类型:String

    一个或多个类(用空格隔开)添加到匹配的元素的class属性。

    2、.addClass(function)

    类型:Function(Integer index , String currentClassName)==>String

    一个函数返回一个或多个空格分隔的类名称添加到现有的类名(s)。 接收元素的索引位置的设置和现有的类名(s)作为参数。 在函数内this是指当前元素的集合。 
     
    ①一次添加多个类:
     1 $("p").addClass("myClass yourClass"); 

    ②切换元素的类从一个到另一个:

    1 $("p").removeClass("myClass noClass").addClass("yourClass");

    所有p段落中的myClass和noClass都被移除,yourClass则被加入到所有匹配的p元素中。

    ③接收一个function函数:

    1 $("ul li").addClass(function( index ){
    2        return "item-"+index; 
    3 })

    如果给定无序列表中的两个<li>元素,那么上面的函数的作用是将在第一个<li>中加入item-0类,第二个<li>中加入item-1类。

    2 .attr()

    获取匹配元素集合的属性的第一个元素的值,或者设置一个或多个属性给匹配的每个元素。

    .attr(attributeName);//只获取匹配元素集合的第一个元素的属性值,想要获取多个值可以利用jQuery的.each()或.map()方法

    .attr(attributeName,value);//给制定的属性设置值

    ①获取属性值:

     1 <body>
     2 <input id="check1" checked="checked" type="checkbox" />
     3 <label for="check1" >check me</label>
     4  
     5 <script>
     6 $("input").change(function(){
     7 var $input=$("input[id='check1']");
     8 $("p").html("通过.attr('checked')获取checked的值:"+$input.attr("checked")+<br>
     9 "通过.prop('checked')获取checked的属性值:"+$input.prop("checked")+<br>
    10 "通过.is(':checked')获取checked的属性值:"+$input.is(":checked")+<br>
    11 }
    12 </script>
    13 </body>
    14  
    15 结果: Check me
    16  
    17 .attr( 'checked' ): checked//取值
    18 .prop( 'checked' ): true//判断
    19 .is( ':checked' ): true//判断

    上面针对checkbox的情况,相对比较特殊,.attr()是取得属性的值,.prop()在checkedselected,  disabled三个DOM元素属性取值时,返回的结果是布尔型,其他情况下都是返回属性值。

    示例:

     1 <style>
     2   em {
     3     color: blue;
     4     font-weight: bold;
     5   }
     6   div {
     7     color: red;
     8   }
     9   </style>
    10   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    11 </head>
    12 <body>
    13  <p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
    14  The title of the emphasis is:<div></div>
    15  <script>
    16 var title = $( "em" ).attr( "title" );
    17 //var title=$("em").prop("title");与.attr()效果一样
    18 $( "div" ).text( title );
    19 </script>

    当设置checkbox的选中情况时: 

     1 <body>
     2    
     3    <input type="checkbox" checked="checked">
     4   <input type="checkbox">
     5    <input type="checkbox">
     6   <input type="checkbox" checked="checked">
     7   
     8  <script>
     9  $( "input[type='checkbox']" ).attr("checked",false);
    10 $("input[type='checkbox']").prop("checked",false);//与.attr()效果一样
    11  </script>
    12    
    13  </body>

    ②设置属性值:

    .attr(attributeName,value):这种方法设置属性值非常方便,且看:

    1 <img id="greatPhoto" src="1.jsp" alt="this is a photo" /><br><script><br>$("#greatPhoto").attr("alt","come form my world!");<br></script>

    设置多个属性值:

    1 $( "#greatPhoto" ).attr({
    2   alt: "Beijing Brush Seller",
    3   title: "photo by Kelly Clark"
    4 });

    用函数来设置值:

    1 <scirpt>
    2 $("#greatephoto").attr(function( i , val){//获取第i个id值为greatphoto的变量值val,此处的i即是id的索引值,val为其对应的id值
    3 return val+"change";
    4 })
    5 </script>

    设置id的div基于页面中的位置:

     1 <body>
     2   
     3 <div>Zero-th <span></span></div>
     4 <div>First <span></span></div>
     5 <div>Second <span></span></div>
     6   
     7 <script>
     8 $("div").attr("id".function(arr){//设置id的属性值,arr的值即是id属性的值,此处没有用变量i来对应,因为下面用了.each()来循环设置
     9 return arr+"div-id";
    10 }).each(function(){//循环追加信息
    11 $("span",this).html("id='<b>"+this.id+"</b>'");//this指代当前循环的"span"对象
    12 })
    13 </script>
    14   
    15 </body>

    .hasClass()

    用来判断是否有匹配的类。应用相对比较简单,看例即知:

    1 <div id="mydiv" class="foo bar"></div>
    2 //判断是否含有类
    3 $( "#mydiv" ).hasClass( "foo" )

    4 .html()

    用来获取匹配的元素集合的第一个元素的文本内容。

    1 <div class="demo-container">
    2    <div class="demo-box">Demonstration Box</div>
    3  </div>
    4  //获取div中的内容
    5  $( "div.demo-container" ).html();

    当.html()方法中输入内容时,则会改变对应元素的文本内容。

    5 .removeAttr()

    清除所有匹配的元素集合的元素。

    .removeAttr()方法是从javascript中的.removeAttribute()继承过来,但是jQuery的此方法可以在不同版本的浏览器上运行

    .removeAttr(attributeName)需要的类型是String类型:

    下面这个例子比较经典,略带一点逻辑:

     1 <button>Change title</button>
     2 <input type="text" title="hello there">
     3 <div id="log"></div>
     4   
     5 <script>
     6 (function() {
     7   var inputTitle = $( "input" ).attr( "title" );
     8   $( "button" ).click(function() {
     9     var input = $( this ).next();//选择同级元素的下一个元素,也就是下面那个div标签对象
    10   
    11     if ( input.attr( "title" ) == inputTitle ) {//如果div对象的title值与input对象的title值相同就清除div对象的title属性值,不相同的情况下则添加input对象的title属性值给div对象
    12       input.removeAttr( "title" )
    13     } else {
    14       input.attr( "title", inputTitle );
    15     }
    16   
    17     $( "#log" ).html( "input title is now " + input.attr( "title" ) );
    18   });
    19 })();
    20 </script>

    .removeAttr()与.removeProp()的作用基本相似。

    5 .val() 

    获取匹配元素集合的第一个元素的值。

    通常用于input、select、textarea。

     1 //获取下拉框的foo类中被选中的项的值
     2 $( "select.foo option:selected").val();
     3   
     4 // 获取所有foo类的下拉框的值
     5 $( "select.foo" ).val();
     6   
     7 // 获取被选中的复选框的值
     8 $( "input:checkbox:checked" ).val();
     9   
    10 // 获取被选中的单选按钮的值
    11 $( "input:radio[name=bar]:checked" ).val();

    下面的例子实现:单选下拉框显示选项的值,多选下拉框显示选中项的值:

     1 <p></p>
     2   
     3 <select id="single">
     4   <option>Single</option>
     5   <option>Single2</option>
     6 </select>
     7   
     8 <select id="multiple" multiple="multiple">
     9   <option selected="selected">Multiple</option>
    10   <option>Multiple2</option>
    11   <option selected="selected">Multiple3</option>
    12 </select>
    13   
    14 <script>
    15 function displayVals(){
    16 var singleVal=$("#single").val();
    17 var multipleVals=$("#multiple").val()|| [];//这样写也可以:var multipleVals=$("#multiple").val();
    18 $("p").html(singleVal+"  "+multipleVals.join(","));
    19 }
    20  
    21 displayVals();//调用displayVal()方法
    22  
    23 $("select").change(displayVals);//当select对象的选项改变时,调用change方法,调用displayVals()方法,如果不加此行,则在变换的时候,不会调用displayVal()这个方法。
    24 </script>

     从input对象中取值:

     1 <div>
     2 <input type="text" value="some words" />
     3 <p></p>
     4 </div>
     5 <script>
     6 $("input").keyup(function(){
     7 var inputValue=$(this).val();
     8 $("p").text(inputValue);
     9 }).keyup();
    10 </script>

    6 .val(value)、.val(function)

    给匹配元素集合的每一个元素设值。

    ① 点击各个button后将其文本值赋给input对象的文本域:

     1 <div>
     2 <button>Filed1</button>
     3 <button>Filed0</button>
     4 <button>Filed1</button>
     5 <input type="text" />
     6 </div>
     7 <script>
     8 $("button").click(function(){
     9 $("input").val($(this).text());
    10 })
    11 </script>

     ②使用函数声明修改Input对象的值:

     1 <div>
     2 <input type="text" value="do something"/>
     3 <input type="text" value="do something"/>
     4 <input type="text" value="do something"/>
     5 </div>
     6 <script>
     7 $("input").blur(function(){//当Input对象失去焦点的时候,函数开始
     8 $(this).val(function(i,val){//取得第i个input对象的value值
     9 return val.toUpperCase();//把这个值转换成大写
    10 }) ;
    11 })
    12 </script>
  • 相关阅读:
    vue自定义select组件
    基于better-scroll封装一个上拉加载下拉刷新组件
    vue自定义tap指令
    vue实现分页器(仿element)
    js异步队列之理解
    Element源码阅读(2)
    Element源码阅读(1)
    unity3d模仿魔兽世界鼠标对游戏操作
    unity3d制作小地图(MiniMap)的简单Demo
    利用unity3d自带的CharacterController包制作第一人称控制模型的简单Demo
  • 原文地址:https://www.cnblogs.com/zhao987/p/13331018.html
Copyright © 2020-2023  润新知