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


Posted in jQuery onMay 15, 2019

本文实例讲述了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>

各行换色。

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

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

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

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
jquery 验证用户名是否重复代码实例
May 14 #jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
JQuery animate动画应用示例
May 14 #jQuery
jquery实现选项卡切换代码实例
May 14 #jQuery
You might like
PHPTree――php快速生成无限级分类
2018/03/30 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
js实现每日签到功能
2018/11/29 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python+pyqt5编写md5生成器
2019/03/18 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python中xlutils库用法浅析
2020/12/29 Python
护理专业毕业生自我鉴定
2013/10/08 职场文书
应届生妇产科护士求职信
2013/10/27 职场文书
生物学学生自我评价
2014/01/17 职场文书
接受捐赠答谢词
2014/01/27 职场文书
教育学习自我评价
2014/02/03 职场文书
平安校园建设方案
2014/05/02 职场文书
火锅店的活动方案
2014/08/15 职场文书
初中同学会活动方案
2014/08/22 职场文书
上课不认真检讨书
2014/09/17 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
Python合并多张图片成PDF
2021/06/09 Python
Mysql 一主多从的部署
2022/05/20 MySQL
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers