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插件制作 自增长输入框实现代码
Aug 17 jQuery
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现获取多选框的值示例
Feb 07 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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
简单的PHP图片上传程序
2008/03/27 PHP
php入门教程 精简版
2009/12/13 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
python 正则式使用心得
2009/05/07 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
阿德的梦教学反思
2014/02/06 职场文书
教师师德考核自我评价
2014/09/13 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
大学生村官入党自传
2015/06/26 职场文书
800字作文之大雪
2019/12/04 职场文书