jQuery 快捷操作
快捷操作
1. class属性值操作
$().attr(‘class’,值);
$().attr(‘class’);
$().removeAttr(‘class’); //删除class的所有属性
$().addClass(值); //给class属性追加信息值
$().removeClass(值); //删除class属性中的某个信息值
$().toggleClass(值); //开关效果，有就删除，没有就添加 //可以在网页上做内容展开和关闭的操作
/*********************************************************************************/
<script type="text/javascript">
function f1(){
//设置class属性信息
//$("div").attr('class','apple');
//$("div").attr('class','orange');
//$("div").attr('class','pear');
//以上三行代码同时执行，后者覆盖前者，class最后体现pear的信息
//给class属性追加信息值
$("div").addClass('apple');
$("div").addClass('orange');
$("div").addClass('pear');
}
function f2(){
//删除class属性的信息值
$('div').removeClass('orange');
$('div').removeClass('apple');
$('div').removeClass('pear');
}
function f3(){
//开关class属性值操作
$('div').toggleClass('orange');
}
</script>
<style type="text/css">
.apple{width:300px; height:200px; border:2px solid blue;}
.orange{background-color:lightblue;}
.pear{font-size:30px;}
</style>
</head>
<body>
<h1>class属性快捷操作</h1>
<div>this is jquery subject</div>
<input type="button" value="设置" onclick="f1()" />
<input type="button" value="删除class的属性值" onclick="f2()" />
<input type="button" value="开关class属性值操作" onclick="f3()" />
/*********************************************************************************/
2. 标签包含内容操作
<div>hello<span>world</span></div>
javascript操作：
dvnode.innerHTML 获得div包含的信息
dvnode.innerHTML = XXX； 设置div包含的内容
(innerHTML不是w3c标准技术，许多浏览器对其有支持而已)
jquery操作：
$().html(); //获得节点包含的信息，可能包含节点标签
$().html(信息); //设置节点包含的内容
$().text(); //获得节点包含的“文本字符串信息”内容，过滤掉html标签
$().text(信息); //设置节点包含的内容(有html标签就把“><”符号变为符号实体)
/***************************************************************************/
function f1(){
//获取-(普通文本 和 html标签 都可以获得)
console.log($('div').html());//this is <p>jquery <span>subject</span></p>
//获取-只是针对文本内容其作用(过滤html标签)
console.log($('div').text());//this is jquery subject
}
function f2(){
//设置-(普通文本 和 html标签 都可以获得,html标签也可以被浏览器正常解析)
//$('div').html("欢迎访问 <a href='http:www.baidu.com'>百度</a>");
//设置-主要针对文本内容，如果有html标签，<>符号变为符号实体
$('div').text("欢迎访问 <a href='http:www.baidu.com'>百度</a>");
}
<h1><标签>包含内容快捷操作</h1>
<div>this is <p>jquery <span>subject</span></p></div>
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
/***************************************************************************/
html() 和 text()方法的区别：
① 获取内容
前者可以获取html标签 和 普通字符串内容
后者只获取普通字符串内容
② 设置内容
前者可以设置html标签 和 普通字符串内容
后者只设置普通字符串内容，如果内容里边有tag标签内容，就把其中的”<”“>”符号转变为符号实体 <-----< >----> 空格------
以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容，则使用效果一致。
css样式操作
$().css(name，value); //设置
$().css(name); //获取
$().css(json对象); //同时修改多个css样式
3.1 css()样式操作特点：
① 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式
② 复合属性样式需要拆分为"具体样式"才可以操作
例如： background 需要拆分为 background-color
background-image 等进行操作
border：
border-left-style
border-left-width
border-left-color 等
margin：
margin-left margin-top 等
value属性快捷操作
$().attr(‘value’);
$().attr(‘value’,信息值);
快捷操作：
$().val(); //获得value属性值
$().val(信息值); //设置value属性的值
该val方法在 复选框、单选按钮、下拉列表 的使用有凸出表现。
复选框操作
全选、反选、全不选
$().attr(‘checked’,true); //设置复选框选中
$().attr(‘checked’,false); //取消复选框选中
$().attr(‘checked’); //判断复选框选中情况，返回布尔值
jQuery 快捷操作的更多相关文章
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- Sublime Text 2 快捷操作
Sublime Text 2 包含了大量快捷操作,而且还很方便修改和追加自己喜欢的快捷键. 查看快捷键的方式也很简单: 点击菜单栏:Preferences->Key Bindings –Defa ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- windows系统快捷操作の进阶篇
上次介绍了windows系统上一些自带的常用快捷键,有些确实很方便,也满足了我们的一部分需求.但是我们追求效率的步伐怎会止步于此?这一次我将会进一步介绍windows上提升效率的方法. 一:运行 打开 ...
- windows系统快捷操作の基础篇
从网上汇总了一些windows系统上常用的快捷键,结合自己的使用经验,将平时使用电脑时最常用的快捷键记录在此.注意这里罗列的是平时最常用到的,其他的一般来说不怎么用到的并不在此列,如果想要完整列表,请 ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- jQuery HTML 操作
jQuery 包含很多供改变和操作 HTML 的强大函数. 改变 HTML 内容 语法 $(selector).html(content) html() 函数改变所匹配的 HTML 元素的内容(inn ...
- 3D Touch介绍：电子秤App与快捷操作
随着iPhone6s与6s plus的到来,苹果给我们展现了一种全新的交互方式:重按手势.你可能知道,这个特性已经在Apple Watch和MacBook上推出了,不过那时叫Force Touch,就 ...
随机推荐
- 单调栈+线段树——cf1220F
首先考虑初始排列,pi会让周围所有比其大的元素深度+1,所以要求每个点的深度,只要其被覆盖了几次即可 这个覆盖可以通过处理每个元素的左右边界(单调栈O(n))+线段树区间更新(Ologn(n))来做 ...
- 高级运维(三)：部署Lnmp环境、构建Lnmp平台、地址重写
一.部署LNMP环境 目标: 安装部署Nginx.MariaDB.PHP环境 1> 安装部署Nginx.MariaDB.PHP.PHP-FPM: 2> 启动Nginx.MariaDB.FP ...
- python实现收邮件判断模块poplib，email
一.代码 # 输入邮件地址, 口令和POP3服务器地址: import datetime import email import poplib import email.policy from ema ...
- 解决$.ajax请求在ie8下失效问题
ie8下默认把跨域请求拦截了,需要用jquery.xdomainrequest.min.js 处理跨域问题,需放在jq下引入 http://cdnjs.cloudflare.com/ajax/libs ...
- 如何加大jvm的内存和tomcat的内存
如何扩大jvm的内存和tomcat的内存,如何让项目没有用的值得到及时的回收和清理,java项目 最佳答案 修改 tomcat 的内存方式:修改 catalina.bat在set JAVA_OPT ...
- I/O复用select 使用简介
一:五种I/O模型区分: 1.阻塞I/O模型 最流行的I/O模型是阻塞I/O模型,缺省情形下,所有套接口都是阻塞的.我们以数据报套接口为例来讲解此模型(我们使用UDP而不是TCP作为例子的原 ...
- Fiddler设置抓一个域名下个包
设置抓一个域名下个包 右侧Filters 勾选Use Filters 勾选Hosts 选择 Show only the follwing Hosts 设置好自己的抓包的域名
- 通过MyEclipse操作数据库，执行sql语句使我们不用切换多个工具，直接工作，方便快捷
通过MyEclipse操作数据库,执行sql语句使我们不用切换多个工具,直接工作,方便快捷.效果如下: 步骤1:通过MyEclipse中的window->show View->ot ...
- <随便写>软件设计遵循的基本原则
1.高内聚,低耦合 所谓高内聚,是指一个软件模块内各个元素彼此结合的紧密程度要高,即一个软件模块是由相关性很强的代码组成,只负责一项任务,也就是常说的单一责任原则. 所谓低耦合,是指一个软件系统内不同 ...
- idea一直在copying resources或者一直在build,卡住不动，问题已解决
IDE在启动项目的过程中,一直copying,或者是build一直卡住,需要在modules中配置下,把target文件夹移出resource folder 同时,在此之前,我还屏蔽了项目中pom.x ...