今天看到一个新奇的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接触初级----- 一种新奇的选择器用法的更多相关文章

  1. jquery接触初级-----juqery选择器实例

    jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成 这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...

  2. jquery接触初级----jquery 选择器

    css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...

  3. jquery接触初级-----ajax 之:load()方法

    jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson() 1.load()方法 格式:load ...

  4. jquery接触初级-----ajax 之:jquery_ajax 方法

    1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data:  采用键值对的方式存储于对象中; callback: 载入成功时(当 ...

  5. jquery接触初级-----juqery DOM操作 之一

    1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...

  6. jquery接触初级-----juqery 动画函数

    1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...

  7. jquery接触初级-----juqery DOM操作实例,动态图片显示

    1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...

  8. jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...

  9. jquery接触初级-----juqery DOM操作 之二

    DOm 操作之: 1.1  children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...

随机推荐

  1. PHP程序员的进阶之路

    第1阶段:初级PHP程序员 重点:把LNMP搞熟练(核心是安装配置基本操作)目标:能够完成基本的LNMP环境安装,简单配置维护:能够做基本的简单系统的PHP开发:能够在PHP中型系统中支持某个PHP功 ...

  2. IP地址基础

    第一台计算机的名字   1946年2月14日,世界上第一台电脑ENIAC在美国宾夕法尼亚大学诞生,名叫ENIAC(爱尼阿克). 第一个网络的名字: arpanet 计算机网络定义: 物理位置不同.功能 ...

  3. servlet简单的小例子

    去我云盘下载: https://pan.baidu.com/s/1E2yoZ2Nmk2FE2XjuPOCvjA 访问方式:http://localhost:8080/testServlet/index ...

  4. [UE4]工程设置:自动捕获鼠标、通过代码设置鼠标显示隐藏、输入模式、编译时自动保存

    一.在4.20版本中运行游戏,在没有进行任何设置的情况下,游戏不会自动捕获鼠标,游戏不会接受输入,需要手动点一下游戏界面才行.如果要跟老版本一样运行游戏自动捕获鼠标,需要进行设置 二.也可以通过代码的 ...

  5. Ext.NET Combobox实现数据源静态配置

    背景 项目中使用增值税税率, 需求原本是统一的指定税率, 譬如3% 5% 等固定的. 随着业务增加, 发现不同业务有不同的税率, 一会加一个, 一下要改很多个界面. 就想着放到统一的地方. 技术背景 ...

  6. AWS之搭建深度学习主机

    B.G 至2017.11 GPU选型:(参考知乎.CSDN) 高性价比的两款:GTX1080ti, Titan X --通常调试算法  i7CPU+32G内存+SSD+2*GPU(单块显存>6G ...

  7. C# webbrowser遍历网页元素

    //不引用其他单元  foreach(HtmlElement ele in WB1.Document.All)                 {                   if(ele.I ...

  8. python各种推导式

    字典推导式 例一:将一个字典的key和value对调 mcase = {, } mcase_frequency = {mcase[k]: k for k in mcase} print(mcase_f ...

  9. Java程序---多数字求和

    题目: 编写一个程序,此程序从命令行接收多个数字,求和之后输出结果. 设计思想: 1.记录要输入的数字的个数n 2.建立一个长度为n的数组存储输入的数字 3.累加求和并输出结果 注:此程序中应用了Sc ...

  10. 搭建(WSTMart)php电商环境时缺少fileinfo函数

    搭建WSTMart环境步骤: 第一步:安装phpstudy,一键安装即可 第二步:把下好的系统源码,放到一个文件夹中,并放到刚刚安装好的phpstudy下WWW文件夹下,如WWW>WSTMart ...