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 ...
随机推荐
- Spring MVC（2）Spring MVC 组件开发
一.控制器接收各类请求参数 代码测试环境: 接收各类参数的控制器--ParamsController package com.ssm.chapter15.controller; @Controller ...
- OptimalSolution(8)--位运算
一.不用额外变量交换两个整数的值 如果给定整数a和b,用以下三行代码即可交换a和b的值.a = a ^ b; b = a ^ b; a = a ^ b; a = a ^ b :假设a异或b的结果记为c ...
- （记录）Ubuntu系统中运行需要导入jar包的Java程序
在学习Redis的过程中,在学到Redis客户端Jedis的时候,考虑到能不能在ubuntu下用Vim编写Java程序并且能够运行呢? 于是,首先在网上调研了一番用Vim写Java程序的可实现性. 相 ...
- index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- iOS 原生库对 https 的处理
转载自:swift cafe 使用 NSURLSession NSURLSession 是 iOS 原生提供的网络处理库.它提供了丰富的接口以及配置选项,满足我们平时网络处理的大部分需求,同时它也支持 ...
- ios swift多线程的实现 Multithreading
1.多线程的概念 Multithreading多线程是指从软件或硬件上,实现多个线程并发执行的技术.使得能够同步完成多项任务,提高资源使用效率. 1.1 任务.进程和线程 任务Task:应用程序完成的 ...
- tensorflow制作tfrecord格式数据
tf.Example msg tensorflow提供了一种统一的格式.tfrecord来存储图像数据.用的是自家的google protobuf.就是把图像数据序列化成自定义格式的二进制数据. To ...
- 在VMware下进行的使用ssh服务管理远程主机
基于密钥的安全验证--sshd服务的配置文件解析(两台linux) 首先你有两台虚拟机 并且能够ping通(该实验的目的是通过客户端访问服务端) 打开终端进入到这个界面 看一下服务 如果有这三个服 ...
- 暑期集训20190725 胜地不常(paradise)
[题目描述] 给定两个长度为n的非负整数数组a,b, [输入数据] 第一行一个整数n. 第二行n个整数a1~an. 第三行n个整数b1~bn. [输出数据] 一行一个整数表示答案. [样例输入] 4 ...
- TCP/IP协议第一卷第三章 IP首部分析
IP介绍 IP是TCP/IP协议族中最为核心的协议.所有的TCP.UDP.ICMP.IGMP数据都以IP数据报格式传输. IP提供不可靠.无连接的数据报传送服务. 不可靠(unreliable)它不能 ...