day 49
今日内容
标签操作
样式操作
样式类操作
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
示例代码
$('.c1').addClass('c2');
$('.c1').removeClass('c2');
$('.c1').hasClass('c2');
$('.c1').toggleClass('c2');
css样式
原生js
标签.style.color = 'red';
jquery
$('.c1').css('background-color','red');
同时设置多个css样式
$('.c1').css({'background-color':'yellow','width':'200px'})
位置操作
查看位置
$('.c2').position(); //查看相对位置
{top: 20, left: 20}
$('.c2').offset(); //查看距离窗口左上角的绝对位置
{top: 28, left: 28}
设置位置
$('.c2').offset({'top':'20','left':'40'});
//设置位置的时候不用添加px，
jQuery绑定点击事件的写法
原生js绑定点击事件
// $('.c1')[0].onclick = function () {
// this.style.backgroundColor = 'green';
// }
jquery绑定点击事件
$('.c1').click(function () {
$(this).css('background-color','green');
})
//this是dom对象，需要转化为jquary
点击事件和滚动事件的示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 100px;
width: 100px;
}
.c2{
background-color: green;
height: 1000px;
width: 100px;
}
.c3{
background-color: blue;
height: 1000px;
width: 100px;
}
.s1{
position: fixed;
left:20px;
bottom: 20px;
height: 40px;
width: 80px;
background-color: purple;
line-height: 40px;
text-align: center;
}
.s1 a{
color: white;
font-size: 14px;
text-decoration: none;
}
.hide{
display: none;
}
</style>
</head>
<body>
<!--<a name="top">这里是顶部</a>-->
<!--<a>这里是顶部</a>-->
<span>顶部位置</span>
<div class="c1"></div>
<button class="change-postion">走你</button>
<div class="c2"></div>
<div class="c3"></div>
<span class="s1 hide">
<!--<a href="#top">返回顶部</a>-->
<span>返回顶部</span>
</span>
<script src="jquery.js"></script>
<script>
//点击事件来改变标签位置
$('.change-postion').click(function () {
$('.c1').offset({top:200,left:200});
});
//滚动事件,监听滚动距离来显示或者隐藏标签
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >=200){
$('.s1').removeClass('hide');
}else {
$('.s1').addClass('hide');
}
});
// 回到顶部,scrollTop设置值
$('.s1').click(function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
尺寸
$('.c1').height(); //content 高度
$('.c1').width(); //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
border: 2px solid red;
background-color: green;
padding: 20px 30px;
}
</style>
</head>
<body>
<div class="c1"></div>
<script src="jquery.js"></script>
</body>
</html>
文本操作
html() //取得第一个匹配元素的html内容，包含标签内容
html(val) //设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
text() // 取得所有匹配元素的内容，只有文本内容，没有标签
text(val) //设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');
值操作
获取值
input type='text'的标签-- $('#username').val();
input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();//是不行的,这样选取多个的时候只能取到第一个，需要循环取值才可以拿到
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
单选select --- $('#city').val();
多选select --- $('#author').val(); // ["2", "3"]
设置值
input type='text'的标签 --- $('#username').val('李杰');
input type='radio'标签 --- $('[name="sex"]').val(['3']);
如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
单选select --- $('#city').val('1'); option value='1'
多选select --- $('#author').val(['2','3'])
属性操作
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr(attrName)// 从每一个匹配的元素中删除一个属性
示例:
设置单个属性
$('.c1').attr('xx','oo');
设置多个属性
$('.c1').attr({'age':'18','sex':'alex'});
查看属性
$('.c1').attr('属性名');
$('.c1').attr('xx');
删除属性
$('.c1').removeAttr('xx');
prop -- 针对的是checked\selected\disabled..
查看标签是否有checked属性,也就是是否被选中
attr $(':checked').attr('checked'); //结果有checked --没有 undefined
prop $(':checked').prop('checked'); //结果有true --没有 false
通过设置属性的方式来设置是否选中:
$(':radio').eq(2).prop('checked',true); true和false不能加引号
$(':radio').eq(2).prop('checked',false);
简单总结:
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
#添加字符串照样能识别标签 *****
$('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
示例
$('a').prependTo($('div'));
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还
$('div').remove(); //包括自己
$('div').empty(); //清空不包括自己
替换
replaceWith()
rep laceAll() //用前面的内容替换 括号中的内容
示例:
var a = document.createElement('a')
a.href = 'http://www.baidu.com';
a.innerText = 'xxx';
$('span').replaceWith(a); //用 a标签 替换 span
$(a).replaceAll('span'); //用 span 替换 a标签
clone()克隆
<button class="btn">屠龙宝刀,点击就送!</button>
$('.btn').click(function () {
// var a = $(this).clone(); //克隆标签
var a = $(this).clone(true); //连带事件一起克隆
$(this).after(a);
})
day 49的更多相关文章
- 49. 3种方法实现复杂链表的复制[clone of complex linked list]
[本文链接] http://www.cnblogs.com/hellogiser/p/clone-of-complex-linked-list.html [题目] 有一个复杂链表,其结点除了有一个ne ...
- chrome浏览器的跨域设置——包括版本49前后两种设置
做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提 ...
- PHP5.3.3+Apache2.2.16+MySQL5.1.49
轻松配置PHP5.3.3+Apache2.2.16+MySQL5.1.49,下面是有详细的步骤说明. 第一步:下载安装的文件 1. MySQL:下载地址mysql-5.1.49-win32.msi ...
- LeetCode - 49. Group Anagrams
49. Group Anagrams Problem's Link ------------------------------------------------------------------ ...
- CodeForce Round#49 untitled (Hdu 5339)
Untitled Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Su ...
- glib-2.49.4-msys-x86-staticLib.7z
glib-2.49.4 MSYS 静态库 编译 export LIBFFI_CFLAGS=" -I/usr/local/lib/libffi-3.2.1/include " \ e ...
- 分享Kali Linux 2016.2第49周虚拟机
分享Kali Linux 2016.2第49周虚拟机该虚拟机使用Kali Linux 2016.2第49周的64位镜像安装而成.基本配置如下:(1)该系统默认设置单CPU双核,内存为2GB,硬盘为50 ...
- 分享Kali Linux 2016.2第49周镜像文件
分享Kali Linux 2016.2第49周镜像文件 Kali Linux官方于12月4日发布Kali Linux 2016.2的第49周镜像.这次保持以往规律,仍然是11个镜像文件.默认的Gnom ...
- Chapter7: question 49 - 50
49. 把字符串转换为整数 很多细节需要注意.(空格,符号,溢出等) Go: 8. String to Integer (atoi) 50. 树种两个结点的最低公共祖先 A. 若是二叉搜索树,直接与根 ...
- 解决 01-Jul-2016 10:49:05.875 WARNING [localhost-startStop-2] org.apache.catalina.loader.WebappClassLoaderBase.clearReferencesJdbc The web application [ROOT] registered the JDBC driver [com.mysql.jdbc.D
01-Jul-2016 10:49:05.875 WARNING [localhost-startStop-2] org.apache.catalina.loader.WebappClassLoade ...
随机推荐
- django-常见问题勘误
1.NoReverseMatch at / Reverse for 'about' not found. 'about' is not a valid view function or pattern ...
- vue 踩坑--项目名称不能与插件名称一样
今天webpack搭建,命令行一直报错 百度说是项目名称为:vue npm 拒绝安装 后来才发现是 package.json的name名称也设成了vue 所以 修改一下就可以了.
- 设计时需要考虑的问题（webAPI）
1.根据api接口访问路径定义好controller和action. 2.记录操作日志.包含接口入参.出参.异常以及重要的节点数据(数据库返回.第三方接口返回.重要的私有变量值) 3.入参合法性检查. ...
- 学习笔记65_K均值_聚类算法
- 使用float设置经典的网站前端结构(深入探讨)
.要是DIV的子元素宽度大于它自己的宽度,不管子元素有没有脱离文档流,子元素会在横向向右溢出. 关于高度:1.要是DIV的高度没有设定,其高度受“没有脱离文档流”的子元素影响.以下是DIV宽度为0的情 ...
- C语言程序设计100例之（6）：数字反转
例6 数字反转 题目描述 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原数为零,否则反转后得到的新数的最高位数字不应为零(参见样例2). 输入格式 ...
- html5 textarea 写入换行的方法
html5 textarea 写入换行的方法<pre> <textarea id="fwe" class="selmiao" cols=&qu ...
- 计划任务at和crontab
目标:会看,会写计划任务时间,会制定计划任务 一次性:at yum -y install at #安装at systemctl start atd #启动at服务 systemctl enable a ...
- 详解Spring Security的formLogin登录认证模式
一.formLogin的应用场景 在本专栏之前的文章中,已经给大家介绍过Spring Security的HttpBasic模式,该模式比较简单,只是进行了通过携带Http的Header进行简单的登录验 ...
- Java nio 空轮询bug到底是什么
编者注:Java nio 空轮询bug也就是Java nio在Linux系统下的epoll空轮询问题. epoll机制是Linux下一种高效的IO复用方式,相较于select和poll机制来说.其高效 ...