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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
Jquery Fade用法详解
Nov 06 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
简化php模板页面中分页代码的解析
2009/02/06 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php制作文本式留言板
2015/03/18 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
JAVASCRIPT keycode总结
2009/02/04 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
django 控制页面跳转的例子
2019/08/06 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
Overload和Override的区别
2012/09/02 面试题
高中教师评语大全
2014/04/25 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
环保志愿者活动方案
2014/08/14 职场文书
政工师工作总结2015
2015/05/26 职场文书
5个实用的JavaScript新特性
2022/06/16 Javascript