跟着JQuery API学Jquery 之二 属性


Posted in Javascript onApril 09, 2010

我们常常需要对节点属性,内容,文本进行变更,就需要用到这里的几个函数了 。

1属性
这里我们看到了一个 attr()函数,有四种形式其中 attr(name)是得到一个所选择的属性值,attr(properties)attr(key,value) attr(key,fn)是为一个属性赋值
这里要说一下的是在Jquery中有这样的设计,得到一个对象的值和给一个对象赋值使用的是同样的函数,用fn(name)来给一个对象赋值,用fn(name,value)来给一个对象赋值。
先看attr(name)是如何来得到一个属性值的
我们有
<img src="1.jpg"/>
这样我们希望得到img中stc的值 首先我们使用选择器来选中这个img $(“img”)得到了上面的那个节点,然后我们用attr()来得到src的值:$(”img”).attr(“src”)
这样我们就得到了1.jpg这个值

现在我们希望把1.jpg这个图想换成2.jpg这个图像:就用 $(“img”).attr(“src”,”2.jpg”) ,这个就是fn(name,key)这种形式,当然我们知道javascript中比如 onclick中可能是一个函数,当然其他的属性也可以是函数,所以我们这个key也可以是一个函数 $(“img”).attr(“src”,function(){return ‘3.jpg'}),这是第二种形式其实和第一种是一样的
第三种,也就是attr(properties)这种是以josn格式来以name:value来对属性进行赋值,在Jquery中,这种方式是很常用的,结构也非常的清晰
比如我们要设置 img的alt和src 可以直接写成$(“img”).attr({src:”4.jpg”,alt:”说明”})
一般我们做系统都要有增加、修改、删除。前面我们说了前两个了,那如何删除一个属性呢
这里有要用到 removeAttr(name)这里就很容易理解了 和arrt(name)刚好相反,一个是得到一个属性,一个是删除一个属性 $(“img”).removeAttr(“alt”)

好了我们总结一下操作属性的几个函数
查找:$(”img”).attr(“src”) 查找出src的值
添加/修改$(“img”).attr(“src”,”2.jpg”) $(“img”).attr(“src”,function(){return “2.jpg”}) $(“img”).attr({src:”2.jpg”})
删除 $(“img”).removeAttr(“src”)
2 css类
当我们需要给一个节点比如
<div></div>
来添加一个css的样式 那我们需要怎么做呢
我们按照上面属性的方法 我们先在css中写一个class样式.sty{……},我们选择这个div 然后给他添加一个class $(“div”).attr(“class”,”sty”),
后来我们发现这样是不是太麻烦了,所以就发明了addClass(class)来对上面的进行简写
$(“div”).addClass(“sty”)就完事了。
既然有添加当然也就免不了删除了 $(“div”).removeClass(“sty”) 删除sty这个类

还有一个函数toggleClass(class)如果存在就删除,不存在就添加。
这个确实是一个很怪异的函数这个有什么用呢,比如我们在一组一个
<ul>
<li><li>
<li><li>
<li><li>
</ul>
上我们在对li上面的鼠标进入和鼠标移出都添加上这个函数的话 ,就可以实现鼠标移动的效果了

3 html
这里我们看到了一个html()和一个html(val)就是我们前面说的fn(name)fn(name,value)这种类型的函数
Html()是取得第一个匹配元素的html类容
Html(val)是设置匹配的节点的html的类容

4 文本
这里同样有两个函数 text()text(val)一个是取值 一个是设置值 和html差不多
取值不同的是html()是取匹配的第一个元素的html类容,而text是取得的所有的text而忽略了html节点
而赋值的话text()对html的类容比如<a></a>会转换成文本 而html()仍然解释为html元素

5值
这里还是一样 val()和val(val)一个是获取值,一个是设置值 比如
<input value="some text"/>
我们获取这个值 some text $(“input”).val()
设置这个值$(“input”).val(“xxiu”)

这里我们对属性就看完了 我们发现我们只看了几个函数而已
attr(name[,val,|fn]) removeAttr(name) 添加设置删除一个属性
addClass(class) removeClass(class) 添加设置删除一个类
html([val]) 得到/设置一个heml
text([val]) 得到/设置一个text
val([val]) 得到/设置一个value

Javascript 相关文章推荐
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
JSON 教程 json入门学习笔记
Sep 22 #Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 #Javascript
javaScript call 函数的用法说明
Apr 09 #Javascript
javascript 自动填写表单的实现方法
Apr 09 #Javascript
Extjs入门之动态加载树代码
Apr 09 #Javascript
JS 非图片动态loading效果实现代码
Apr 09 #Javascript
extJs 下拉框联动实现代码
Apr 09 #Javascript
You might like
php输出金字塔的2种实现方法
2014/12/16 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
python抓取网页中图片并保存到本地
2015/12/01 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python实现名片管理器的示例代码
2019/12/17 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Python urllib2运行过程原理解析
2020/06/04 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
市场营销专业推荐信
2013/11/03 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
培训科主任岗位职责
2014/08/08 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
入党函调证明材料
2015/06/19 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js