jQuery之属性
1. 操作任意属性
attr() 操作非布尔值的
removeAttr()
prop() 操作布尔值的
2. 操作class属性
addClass() 添加class属性
removeClass() 移除class属性
3. 操作HTML代码/文本/值
html()
val()
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul> <input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>
需求和实现如下:
1. 读取第一个div的title属性
2. 给所有的div设置name属性(value为atguigu)
3. 移除所有div的title属性
4. 给所有的div设置class='guiguClass'
5. 给所有的div添加class='abc'
6. 移除所有div的guiguClass的class
7. 得到最后一个li的标签体文本
8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
9. 得到输入框中的value值
10. 将输入框的值设置为atguigu
11. 点击'全选'按钮实现全选
12. 点击'全不选'按钮实现全不选
//1. 读取第一个div的title属性值
console.log($("div:first").attr("title")) // 2. 给所有的div设置name属性(value为atguigu)
console.log($("div:first").attr("name",'rainbow')) // 3. 移除所有div的title属性
$("div").removeAttr("title")
// 4. 给所有的div设置class='guiguClass'
$("div").attr("class","guiguClass");
// 5. 给所有的div添加class='abc'
$("div").addClass("abc");
// 6. 移除所有div的guiguClass的class
$("div").removeClass("guiguClass") // 7. 得到最后一个li的标签体文本
console.log($("li:last").html())
// 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
$("li:first").html("<h1>mmmmmmmmm</h1>")
console.log($("li:first").html())
// 9. 得到输入框中的value值
console.log($(":text").val())
// 10. 将输入框的值设置为atguigu
$(":text").val("atguigu")
// 11. 点击'全选'按钮实现全选
// attr(): 操作属性值为非布尔值的属性
// prop(): 专门操作属性值为布尔值的属性
var $checkboxs = $(":checkbox");
$(":button:first").click(function(){
$checkboxs.prop("checked",true);
}); // 12. 点击'全不选'按钮实现全不选
$(":button:last").click(function(){
$checkboxs.prop("checked",false);
})
jQuery之属性的更多相关文章
- jQuery的属性
The Write Less , Do More ! jQuery的属性 1. attr(name|properties|key,value|fn) : 设置或返回被选元素的属性值 ①获取属性 < ...
- 深入浏览器兼容 细数jQuery Hooks 属性篇
关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...
- jquery html属性和text属性的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 操作属性
jQuery 操作属性 我们来看看jQuery 操作属性都有哪些???? 属性 css代码!! html代码!! jQuery代码!! 下面做一个小例子 小例子html的代码 小例子jQuery的代码 ...
- jquery之属性操作
jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...
- jQuery.support属性
jQuery.support 属性包含表示不同浏览器特性或漏洞的属性集. 此属性主要用于 jQuery 的内部使用 jQuery.support主要包括以下测试: boxModel: 如果这个页面和浏 ...
- 前端 ----jQuery的属性操作
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...
- jQuery 查找属性
jQuery 查找属性 示例: <div xsk='123' > <div xsk='456' > // 具有xsk属性的所有标签 $('[xsk]') // xsk属性等于1 ...
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
随机推荐
- 一次JVM调优经历
前几天前端同事找我帮忙解决一个频繁FullGC问题.在100用户,每秒5个请求条件下进行测试,发现频繁FullGC. 使用VisualVM观察Jvm运行时信息,发现DB连接池占用了较多的资源.于是看了 ...
- python的subprocess基本
先在同一个文件夹下创建两个.py文件. 第一个:13.py # -*- coding: utf-8 -*- __author__ = "YuDian" ''' multiproce ...
- VIM - 标准模式下简单操作
1. 概述 标准模式下, 简单操作 移动 删除 复制粘贴 收益 熟练后, 编辑文本基本不需要鼠标操作了 思路 只讲最基本的, 避免初学时的混淆 把基本操作归类了, 方便理解 2. 准备 一篇篇幅较长的 ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- nw
https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js
- 20155203 实验二《Java面向对象程序设计》实验报告
20155203 实验二<Java面向对象程序设计>实验报告 一.实验内容 参考http://www.cnblogs.com/rocedu/p/6371315.html#SECUNITTE ...
- 20155207 《Java程序设计》实验报告二:Java面向对象程序设计
实验要求 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验内容 一.单元测试 1.三种代码 ...
- 20155215宣言 实验四 Andoid开发基础实验报告
20155215宣言 实验四 Andoid开发基础实验报告 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程: 2.完成实验 ...
- centos安装smokeping
本文摘自网友博客,并亲自验证 博客地址:https://blog.csdn.net/erica_yue/article/details/78455101 1.安装依赖包: yum install -y ...
- 用 Qt 的 QAudioOutput 类播放 WAV 音频文件
用 Qt 的 QAudioOutput 类播放 WAV 音频文件 最近有一个项目,需要同时控制 4 个声卡播放不同的声音,声音文件很简单就是没有任何压缩的 wav 文件. 如果只是播放 wav 文件, ...