JQuery属性操作与循环用法示例

本文实例讲述了JQuery属性操作与循环用法。分享给大家供大家参考，具体如下：

取出或者设置html内容

var $htm= $("#div").html  取出
$("#div").html("<span>文字</span>")  设置

取出或者设置某个属性的值

var $src=$('#img1').prop('src')  取出
$('#img1').prop({src:'test.jpg',alt:"test Image"}) 设置

设置a标签的属性

跳转到百度的链接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var $a=$('.link');
      console.log($a.prop('class'));/*没有设置的属性要是读的话会读为空*/
      $a.prop({href:'http://www.baidu.com',title:'百度'});/*设置属性*/
    })
  </script>
</head>
<body>
  <a href="#" rel="external nofollow" class="link">这是一个a标签</a>
</body>
</html>

JQuery的循环

对JQuery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用到each方法

$(function(){
  $('.list li').each(function(i){
    $(this).html(i)
  })
})

得到list类下面的每一个li，赋值加上i。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var $li=$('.list li');
      $li.each(function (index) {
        // $(this).css()
        if($(this).index()%2==0){
          $(this).css({backgroundColor:'gold'});
        }
      })
    })
  </script>
</head>
<body>
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</body>
</html>

各行换色。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery操作checked属性以及disabled属性的多种方法

    下边两种写法没有任何区别 只是少了些代码而已... 复制代码 代码如下: <input id="cb1" type="checkbox" checked /> <input id="cb2" type="checkbox" checked="checked" /> jquery判断checked的三种方法: 复制代码 代码如下: .attr('checked'):   //看版本1.

  • jQuery操作属性和样式详解

    jQuery操作属性和样式详解

    • 区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id,src,alt等叫做这个元素的"属性".我们将其称为"元素属性".但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象",

  • 有关jquery与DOM节点操作方法和属性记录

    有关jquery与DOM节点操作方法和属性记录

    网上找了份jquery的操作节点方法清单.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A) A.before(B) B.insertBefore(A

  • jQuery使用each遍历循环的方法

    1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function (index,domEle){ index就是索引值 domEle 表示获取遍历每一个dom对象 }); 3.更适用的遍历方法 1)先获取某个集合对象 2)遍历集合对象的每一个元素 var d=$("div"); $.each(d,function (index,domEle){ d是要遍

  • jQuery .attr()和.removeAttr()方法操作元素属性示例

    今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性.大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值,或者说动态的修改元素的某个(某些)属性的属性值.那么jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现: 1 .attr():jQuery中的.attr()方法让你能轻松的读取,增加或修改一个元素的属性(详情参考.attr(

  • jQuery 操作 HTML 元素和属性的方法

    jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容:  text().html() 以及 val()方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery&l

  • jquery进行数组遍历如何跳出当前的each循环

    最近在忙着进行官网改版,在做其中的一个项目时碰到了一个小问题.问题是这样的,通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环. 我是使用 $.each() 进行数组循环遍历,但是当进入判断时,不清楚该如何跳出当前循环,于是我就用 javascript 的方法--continue 发现并不正确.API 上的说明只有跳出整个循环(如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略.) 后来上网查了下,得到了结果: return false;-

  • JQuery节点元素属性操作方法

    本文实例讲述了JQuery节点元素属性操作方法.分享给大家供大家参考.具体分析如下: 在JQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性. 获取属性和设置属性 如果要获取p元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称. var $para = $("p"); //获取<p>节点 var p_txt = $para.attr("title"); //获取<p>元素节

  • jQuery元素属性操作实例(设置、获取及删除元素属性)

    jQuery元素属性操作实例(设置、获取及删除元素属性)

    本文实例讲述了jQuery元素属性操作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex

  • jquery根据属性和index来查找属性值并操作

    <div class="zy_menu clearfix"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" re

  • 详解jQuery中的元素的属性和相关操作

    元素属性 元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要. jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值.和 $.fn.css 用法类似,$.fn.attr 既可一次性接受单个属性,也可以接受多个属性(对象) : $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are

随机推荐