jquery-6 jquery属性选择器
jquery-6 jquery属性选择器
一、总结
一句话总结:jquery操作就是选择器加jquery对象的各种方法。
1、大量操作样式用什么方式?
大批量样式通过加类和减类完成
2、jquery中大量属性值设置用什么方式?
推荐json
$().css({})
3、如何将一个input文本的值赋给另一个input文本?
找到两个input,然后用val()方法
31 val=$('input').eq(0).val();
32
33 $('input').eq(1).val(val);
4、如何将一个标签里面的其它标签都赋值给另外标签?
用html()方法
31 $('button').click(function(){
32 val=$('.d1').html();
33 $('.d2').html(val);
34 });
5、如何给元素增加一个类?
addClass()方法
27 $('img').mouseenter(function(){
28 $(this).addClass('img');
29 });
二、jquery属性选择器
1、相关知识
属性:
1.属性
attr();
attr({});
2.CSS类
addClass();
removeClass();
toggleClass();
3.HTML代码
html();
html(val);
4.文本
text();
text(val);
5.值
val();
val(val);
2、代码
val表单元素获取和赋值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} .d1,.d2{
height:300px;
background: #ccc;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<p>
<input type="text">
</p>
<p>
<button>>></button>
</p>
<p>
<input type="text">
</p>
</body>
<script>
$('button').click(function(){
val=$('input').eq(0).val(); $('input').eq(1).val(val);
});
</script>
</html>
html取值和赋值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} .d1,.d2{
height:300px;
background: #ccc;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class='d1'>
<img src="a.png">
<img src="a.png">
<img src="a.png">
<img src="a.png">
</div>
<button>>></button>
<div class="d2"> </div>
</body>
<script>
$('button').click(function(){
val=$('.d1').html();
$('.d2').html(val);
});
</script>
</html>
toggleClass切换类
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
.div1{
background: #ccc;
cursor: pointer;
} .img{
background:#ccc;
border-radius:256px;
transform:scale(1.2,1.2);
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<img src="a.png">
</body>
<script>
$('img').mouseenter(function(){
$(this).toggleClass('img');
}); $('img').mouseleave(function(){
$(this).toggleClass('img');
});
</script>
</html>
attr获取属性值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
.div1{
background: #ccc;
cursor: pointer;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<img src="a.png">
</body>
<script>
$('img').click(function(){
alert($(this).attr('src'));
});
</script>
</html>
jquery-6 jquery属性选择器的更多相关文章
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- js进阶 10-6 jquery中的属性选择器有哪些
js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...
- jQuery选择器之属性选择器Demo
测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jquery表单对象属性选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery选择器之属性选择器
[attribute] 匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...
- jquery的一些属性选择器
td:contains(Henry)选择td里面所有class为Henry的元素 .siblings()选择相同dom层次的所有其他元素,例如 <ul> <li>第一个< ...
- jQuery中的属性选择器
先看代码,后面详细解释: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- jquery属性选择器(同时匹配多个条件)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery属性选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- scroolspy滚动监听插件
<nav id="nav" class="navbar navbar-default"> <a href="#" clas ...
- golang md5
package main import ( "crypto/md5" "encoding/hex" "fmt" "io" ...
- vector转数组
vector转数组 由于vector内部的数据是存放在连续的存储空间,vector转数组事实上只需要获取vector中第一个数据的地址和数据的长度即可.如果仅仅是传参,无需任何操作,直接传地址即可,如 ...
- js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
- Stack overflow 编译能通过,运行时出现Stack overflow
Stack overflow 编译能通过,运行时出现Stack overflow 大家都知道,Windows程序的内存机制大概是这样的,全局变量(局部的静态变量本质也属于此范围)存储于堆内存,该段内存 ...
- 洛谷 P2118 比例简化
P2118 比例简化 题目描述 在社交媒体上,经常会看到针对某一个观点同意与否的民意调查以及结果.例如,对某一观点表示支持的有1498 人,反对的有 902人,那么赞同与反对的比例可以简单的记为149 ...
- ajax上传进度条
<script type="text/javascript"> function register(){ var frm = document.getElementBy ...
- win7管理工具不可用
看看这个路径的文件夹是否还在C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Administrative Tools如果有缺失的文件夹就自己新 ...
- 【Struts2三】拦截器
拦截器:就是在訪问action之前.对其进行拦截!能够在拦截器中做一些逻辑的处理! 比方权限验证.没有权限就不给予訪问! 拦截器等效于servlet中的过滤器! 使用拦截器步骤: 1.定义自己的拦截器 ...
- android开发-获取wifi列表
近期博主在学frangment框架,因此想着想着就想通过listfragment完毕对wifi列表的获取. 好! 如今就不说废话了. 一.wifi的基础知识 在Android的官方文档中定义了例如以下 ...