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,就 ...
随机推荐
- 【LeetCode 26】删除排序数组中的重复项
题目链接 [题解] 沙比提 [代码] class Solution { public: int removeDuplicates(vector<int>& nums) { if ( ...
- 使用PHP curl模拟浏览器抓取网站信息
curl是一个利用URL语法在命令行方式下工作的文件传输工具.curl是一个利用URL语法在命令行方式下工作的文件传输工具.它支持很多协议:FTP, FTPS, HTTP, HTTPS, GOPHER ...
- [CQOI2011]放棋子 题解(dp+组合数学)
Description Input 输入第一行为两个整数n, m, c,即行数.列数和棋子的颜色数. 第二行包含c个正整数,即每个颜色的棋子数. 所有颜色的棋子总数保证不超过nm. N,M<=3 ...
- Xcode Command Line Tools for Mac OS X 10.9 Mavericks
by Daniel Kehoe Last updated 28 December 2013 How to install Apple Xcode Command Line Tools for Mac ...
- ionic学习使用笔记（一） 版本更新及创建项目时遇到的问题解决
最近开始用ionic开发项目,虽然去年的时候用ionic 2.0 开发过公司的项目,不过现在的ionic已经升级到了ionic framework 3.0 了.而且还有个 ionic-cli . 使用 ...
- WinDbg中Check for invalid symbols or bad syntax（断点设置）解决办法
基础知识 bp 程序运行过程中下断点 bu 程序未加载之前下断点 bl 列出所有断点 bc 清除断点 今天在调试驱动的时候 发现下好断点后 无法调试 WinDbg显示 kd> g Break ...
- Vue中时间的设置
设置默认属性ct_month: null 方法: //默认显示今天getdatatime(){ this.ct_month= new Date(); }, //默认显示昨天getdatatime(){ ...
- AI应用在金融领域，如何能够在商业上有所突破
AI应用在金融领域,如何能够在商业上有所突破 如今,随着社会不断发展,技术不断进步,国内外各大金融机构已经在大数据.人工智能.区块链等新技术上有很多尝试,智能客服.智能投顾等新金融形式也早已不新鲜.那 ...
- Android逆向之smali语法宝典
0x01.前言 Android采用的是java语言进行开发,但是Android系统有自己的虚拟机Dalvik,代码编译最终不是采用的java的class,而是使用的smali.我们反编译得到的代码,j ...
- Linux上调试python程序
python -m pdb target.py