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,就 ...
随机推荐
- 行业顶级NoSQL成员坐阵，NoSQL数据库专场重点解析！
NoSQL数据库作为数据库市场最重要的组成之一,它的一举一动都影响着成千上万的企业.本专场邀请了行业顶级的NoSQL核心成员与大家共同展望NoSQL数据库的未来,阿里巴巴.MongoDB.Rediss ...
- Android中如何搭建一个WebServer
今天终于把老大交代的任务搞完了,感觉收获挺多的,所以就写一篇来记录一下吧,首先还是来看一下,老大们的需求 需求: 希望移动端的用户标识(IMEI)和HTML页面的用户标识(Cookie)连接起来,其中 ...
- AcWing 197. 阶乘分解 （筛法）打卡
给定整数 N ,试把阶乘 N! 分解质因数,按照算术基本定理的形式输出分解结果中的 pipi 和 cici 即可. 输入格式 一个整数N. 输出格式 N! 分解质因数后的结果,共若干行,每行一对pi, ...
- NX二次开发-UFUN打开本地文本文档uc4504
NX9+VS2012 #include <uf.h> #include <uf_cfi.h> #include <uf_ui.h> using std::strin ...
- WebKit资源
WebKit 资料搜集 1 what is webkit? WebKit 是一个开源浏览器网页排版引擎,与之相应的引擎有Gecko(Mozilla,Firefox 等使用的排版引擎)和Trident( ...
- linux 查看cpu，memory
https://www.cnblogs.com/ctypyb2002/p/9792951.html
- 洛谷 P3803 【模板】多项式乘法（FFT）
题目链接:P3803 [模板]多项式乘法(FFT) 题意 给定一个 \(n\) 次多项式 \(F(x)\) 和一个 \(m\) 次多项式 \(G(x)\),求 \(F(x)\) 和 \(G(x)\) ...
- c# winForm DotNetBar控件之SuperGridControl
1.添加表头 sgc.PrimaryGrid.SelectionGranularity = SelectionGranularity.Row;//点击选中一行 DevComponents.DotNet ...
- 在vue中获取微信支付code及code被占用问题的解决？
这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...
- 笔记51 Mybatis快速入门（二）
Mybatis的CRUD 1.修改配置文件Category.xml,提供CRUD对应的sql语句. <?xml version="1.0" encoding="UT ...