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 4】寻找两个有序数组的中位数
题目链接 [题解] 假设在两个有序的序列中找第k小的数字. 那么我们先定位第一个序列中的第k/2个数字(不足则取最边上的那个数字)记下标为i1 然后定位第二个序列中的第k/2个数字(同样不足则取最边上 ...
- elementUI拿到当前表格行的数据的另一种写法
背景: 这里是通过点击“修改”按钮后才拿到当前行的数据,不是点击当前行任意位置拿到数据,所以不能用 @row-click 方法 改用点击的时候直接拿到这个表里面的这一条数据 1.绑定事件 <te ...
- php开发面试题---Mysql常用命令行大全
php开发面试题---Mysql常用命令行大全 一.总结 一句话总结: 常见关键词:create,use,drop,insert,update,select,where ,from.inner joi ...
- 使用java.util.Properties工具制作自定义访问配置文件信息
import ch.qos.logback.classic.Logger; import org.slf4j.LoggerFactory; import java.io.IOException; im ...
- 机器学习技法笔记：Homework #5 特征变换&Soft-Margin SVM相关习题
原文地址:https://www.jianshu.com/p/6bf801bdc644 特征变换 问题描述 程序实现 # coding: utf-8 import numpy as np from c ...
- 拾遗：Qemu/KVM
WinXP: #!/bin/bash name=winxp qemu-system-x86_64 \ -enable-kvm \ -cpu host -smp ,sockets=,cores=,thr ...
- （转载） 深入理解ES6箭头函数的this以及各类this面试题总结
声明:本文转载自 https://blog.csdn.net/yangbingbinga/article/details/61424363 ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取 ...
- Feign 系列（01）最简使用姿态
目录 Feign 系列(01)最简使用姿态 1. 引入 maven 依赖 2. 基本用法 3. Feign 声明式注解 Feign 系列(01)最简使用姿态 Spring Cloud 系列目录(htt ...
- 人工智能都能写Java了！这款插件让你编程更轻松
最近在浏览技术社区,发现了一款 IDE 插件,利用人工智能技术帮助程序员高效写代码.节省开发时间,一下子勾起了我的好奇心. 下载之后,使用一番,确实蛮好的,可以有效提升编程效率. 这款插件叫:aixc ...
- [待解决]报错:JSON parse error: Unexpected character
{"code":"9999","message":"JSON parse error: Unexpected character ...