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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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
11个PHP 分页脚本推荐
2011/08/15 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
php 可变函数使用小结
2018/06/12 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
Python中规范定义命名空间的一些建议
2016/06/04 Python
python实现12306火车票查询器
2017/04/20 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
师范生自荐信
2013/10/27 职场文书
正规的求职信范文分享
2013/12/11 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
销售个人求职信范文
2014/04/28 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
高考标语大全
2014/06/05 职场文书
工作收入证明模板
2015/06/12 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android