一、attr（参数...）函数与removeAttr（name）函数

1.1 attr函数

函数实现设置或获取当前元素对象的某个属性值，返回string

参数：（name | properties | key,value | fn）

name:属性名称 properties：名称键值

key，value：属性名称和值 key，function： function返回属性值函数，第一个参数为当前元素的索引值，第二个参数为原始属性值

示例：

$('.username').attr('value') //获取class为username的value属性值

attr的实例运用：在文本中加话

   <form action="" id="f1">用户名称：<input type="text" id="username"> <br> 用户密码：<input type="password" id="password"></form><br><button onclick="limitP()">限制密码长度最多16个字符</button><script>$(function() {$('#username').attr("value", "用户名称")})function limitP() {var pop = {"maxlength": 16}$('#password').attr(pop)}</script>

1.2 removeAttr函数

函数实现根据给定的元素具有的属性名称从而从该元素上移出此属性，返回当前jQuery对象

示例：

$("img").removeAttr("src") //移除所有img元素的src属性

removeAttr与attr综合应用：

    <form action="" id="f1">用户名称：<input type="text" id="username" value="请填写用户名" onclick="removeUse(this)"> <br> 用户密码：<input type="password" id="password" value="123456" onclick="removeUse($(this))"></form><div><p>皑如山上雪</p><p>皎若云间月</p><p>闻君有两意</p><p>故来相决绝</p></div><script>function removeUse(tt) {if (tt instanceof $)tt.removeAttr('value')else$(tt).removeAttr('value')}$(function() {$('div p').attr('style', function(i, value) {if (i % 2 === 0)return 'color:red'elsereturn 'color:pink'})})</script>

结果截图：

二、prop（name|properties | key，value |fn） removeProp

2.1 prop（name|properties | key，value |fn）函数

获取或设置匹配的元素属性值，此函数参数与attr作用相同

示例：

$('input[type ='checkbox']').prop("checked") //选中复选框为true，没选中为false

使用prop的小实例：

    <form action="">用户名称:<input id="user" type="text"><br><input type="text" onclick="insert()"></form><script>$(function() {$('form:first input:last').prop('type', 'button').prop('value', '点击初始化用户名称')})function insert() {$('#user').prop('value', '请输入名称')}</script>

2.2 removeProp

用来删除由jQuery对象调用prop（）方法设置的属性值

示例：

$('p') //删除所有p段落

三、addClass（class | fn）函数和removeClass（[class|fn]）函数

3.1 addClass（class | fn）函数

为每个指定的元素添加指定的类名

class参数：字符串 class名称

fn参数：function（index，class），此函数必须返回一个或多个可控个分隔的class名；index参数为对象在这个集合中的索引值，class参数为这个对象原始的class属性值

示例：

$("p").addClass("selected1 selected2") //设置多个空格分隔

$('ul li:last').addClass(function(){ //函数调用的形式

return $(this).index()

})

3.2 removeClass（[class|fn]）函数

从所有匹配的元素中删除全部或者指定的class

class参数：字符串类型，一个或多个用空格隔开的class类名值

fn函数：函数fun（index，class），返回一个或多个空格隔开的class类名值

index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值

示例：

$("p").removeClass('selected') //从匹配的元素中删除“selected”类

使用removeClass和addClass移出与添加实例：

    <style>.cla1 {font-size: 20px;color: pink;}.cla2 {font-size: 25px;font-family: 'Courier New', Courier, monospace;}</style><p>愿得一心人</p><p>白头不相离</p><p>男儿重意气</p><p>何用钱刀为</p><button onclick="removeCla('cla1')">移出p段落上指定的class</button><button onclick="removeAllCla()">移出所有class</button><script>$(function() {$('p').addClass("cla1 cla2")})function removeCla(cla) {$('p:last').removeClass(cla)}function removeAllCla() {$('p').removeClass()}</script>

效果截图：

点击移出p段落上指定的class：

移出所有class：

四、html函数和text函数

4.1 html函数

设置或获取元素的html内容，和dom中的innerHTML属性相似

参数：

val：预设html值

fn: function(index,html)处理函数

示例：

$('p').html() //获取所有p段落内容

实例：

    <p></p><p></p><p></p><p></p><script>$(function() {$('p').html(function(i, html) {if (i % 2 == 0)return "<font color='red'>壮志饥餐胡虏肉</font>"elsereturn "<font color='yellow'>笑谈渴饮匈奴血</font>"})})</script>

4.2 text函数

设置或获取元素的文本内容，与dom中的innerText属性相似

参数： val：预设值

fn：function（index，text）此函数返回一个HTML字符串，接受两个参数

index 参数为元素在集合中的索引位置

text参数为原先的HTML值

示例：

$('p').text() //p中的文本信息

jQuery学习总结第三天、attr函数与removeAttr函数、prop、 removeProp函数、addClass函数和removeClass函数、html函数和text函数相关推荐

jQuery学习笔记（三）
要点了解什么是万维网以及万维网的三要素了解什么是CS 架构和 BS 架构能够说出浏览器访问网站的基本过程了解TCP/IP协议三次握手和四次挥手的过程理解http请求报文和响应报文掌握常见的 ...
jQuery 学习笔记（三）——事件与应用
页面加载时触发ready()事件 ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行.此 ...
jQuery学习笔记（三）：选择器总结
这一节详细的总结jQuery选择器. 一.基础选择器 $('#info'); // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素$('.infoC ...
JQuery学习系列（三）语法
jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...
jQuery学习笔记（三）jQuery动画效果
1.对角线动画效果:让元素在规定时间里沿着左上角来回显示和隐藏 jq对象.show() hide() toggle() 注意: 1. 括号中可以加动画时长(slow normal fast 毫秒数) ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
【web开发学习笔记】Structs2 Result学习笔记（三）带參数的结果集
Result学习笔记(三)带參数的结果集第一部分:代码 //前端 <head> <meta http-equiv="Content-Type" content= ...
html中text函数,text函数的使用方法
TEXT(value,format_text) 参数1:Value 为数值.计算结果为数字值的公式. 参数2:Format_text 为设置参数1的格式. Text函数的常用法: 1.格式转换通常用 ...
Excel公式-TEXT函数使用
Excel公式-TEXT函数使用日期格式转换千分位和精确位对时间求和日期格式转换 text()函数对日期进行格式转换时,不同的格式参数对应的效果如下表格所示(列名为参数): 千分位和精确位 & ...

jQuery学习总结第三天、attr函数与removeAttr函数、prop、 removeProp函数、addClass函数和removeClass函数、html函数和text函数