jquery接触初级----- 一种新奇的选择器用法
今天看到一个新奇的jquery 选择器的用法，因为以前没有见过，所以记录下来
1.jquery 选择器：
给body添加一个元素，添加元素的时候，同时把属性和点击事件都一起进行添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.test {
background: #ccc;
}
</style>
<script>
$(function() {
// $("<div>"),这是jquery中创建元素的写法
$("<div>", {
class: "abc", // 在元素创建的时候，添加一个对象，对象里包含元素的属性：class
id: "test", // 在元素创建的时候，添加一个对象，对象里包含元素的属性：id
text: 'welcome to study jquery', // 在元素创建的时候，添加一个对象，对象里包含元素的文本属性：text
hhehe: 'nihao', // 在元素创建的时候，添加一个对象，对象里包含元素的自定义属性：hhehe
name:'huanying2015', // 在元素创建的时候，添加一个对象，对象里包含元素的自定义属性：name
click: function() { // 在元素创建的时候，添加一个对象，对象里包含元素的点击事件：click ，这是一个匿名函数
$(this).toggleClass('test');
}
}).appendTo("body"); // 把创建的元素添加到body中 （这种包含元素事件和属性，用一个对象来包含的情况，是第一次见，呵呵，感觉新颖）
});
</script>
</head>
<body>
<input type="button" value="nnndn">
</body>
</html>
运行结果：
查看元素：元素的属性和点击事件都出来了
2. es6 箭头函数实现全选，不选，反选
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="全选" class="btn">
<input type="button" value="全不选" class="btn">
<input type="button" value="反选" class="btn">
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
</body>
</html>
2.1 常规实现：js 代码：
<script>
window.onload = function() {
var abtn = document.querySelectorAll("input.btn");
var acheck = document.querySelectorAll("li>input");
abtn[0].onclick = function() {
acheck.forEach(function(val) {
val.checked = true;
});
};
abtn[1].onclick = function() {
acheck.forEach(function(val) {
val.checked = false;
});
};
abtn[2].onclick = function() {
acheck.forEach(function(val) {
val.checked = !val.checked;
});
};
}
</script>
2.2 箭头函数实现：js代码：
<script>
window.onload = () => {
var abtn = document.querySelectorAll("input.btn");
var acheck = document.querySelectorAll("li>input");
abtn[0].onclick = () => {
acheck.forEach((val) => {
val.checked = true;
});
};
abtn[1].onclick = () => {
acheck.forEach((val) => {
val.checked = false;
});
};
abtn[2].onclick = () => {
acheck.forEach((val) => {
val.checked = !val.checked;
});
};
};
</script>
运行效果：两种方式相同
jquery接触初级----- 一种新奇的选择器用法的更多相关文章
- jquery接触初级-----juqery选择器实例
jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成 这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...
- jquery接触初级----jquery 选择器
css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...
- jquery接触初级-----ajax 之：load()方法
jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson() 1.load()方法 格式:load ...
- jquery接触初级-----ajax 之：jquery_ajax 方法
1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data: 采用键值对的方式存储于对象中; callback: 载入成功时(当 ...
- jquery接触初级-----juqery DOM操作 之一
1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...
- jquery接触初级-----juqery 动画函数
1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...
- jquery接触初级-----juqery DOM操作实例，动态图片显示
1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...
- jquery接触初级----jquery 对象和Dom对象
1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...
- jquery接触初级-----juqery DOM操作 之二
DOm 操作之: 1.1 children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...
随机推荐
- 廖雪峰Java3异常处理-1错误处理-3抛出异常
1.异常的传播 当某个方法抛出异常时: 如果当前方法没有捕获,异常就被抛到上层调用方法 直到遇到某个try...catch被捕获 使用printStackTrace()打印处方法的调用栈 import ...
- 一次聊天引发的思考--java并发包
一次聊天,谈到了死锁的解决.可重入锁等等,突然发现这些离自己很远,只有一些读书时的概念涌入脑海,但各自的应用场景怎么都无法想出.痛定思痛,决定看看concurrent包里涉及并发的类及各自的应用场景. ...
- spring 定时任务 scheduled Cron表达式
转载:https://blog.csdn.net/u011789653/article/details/51153536 可以借鉴:https://www.cnblogs.com/softidea/p ...
- idea关闭标签快捷键修改----兼 常用实用快捷键
还有一个快捷键: 自动补全返回值 : ctrl + alt + v alt + enter: 自动添加未定义的方法 idea 原本的关闭快捷键是: ctrl + F4,但是不好用,谁的手指伸这么长 修 ...
- [UE4]动态改变UniFormGird子控件的row属性
- SCCM2012 R2实战系列之五：发现方法
打开SCCM2012的控制台 点击左侧栏的“管理”选项,然后展开“层次结构配置”,点击“发现方法”来配置客户端发现. 勾选“启用Active Directory林发现”.“发现Active Direc ...
- Mybatis 系列9-强大的动态sql 语句
[Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...
- spark新闻项目环境搭建
前面安装好三节点的centos 6.5 和配置好静态ip,这里就不多说了 创建kfk用户,然后重启 Last login: Fri Jan :: from 192.168.86.1 [spark@sp ...
- Solr Date类型的哪些你不得不了解的细节
我们先来看看Solr日期类型的一些内幕,然后讨论一下Solr日期类型存在的一些问题,最后我们看看怎么解决现存的问题.概述 DateField 在Solr4.x之前,我们只有DateField,这类型现 ...
- 搜狗输入法在Ubuntu下突然不能输入中文
使用搜狗输入法在Ubuntu下突然不能输入中文,这种情况出现多次,先找到一个快捷的解决方案: 首先要知道遇到这种情况的很大可能原因是bin目录里文件过多,系统加载不完全,你就算上面的脚本执行3次都不行 ...