肖哥讲jquery：
jquery
是一个模块 一个库 js封装的一个库
导入jq
<script src="jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
$ == Jquery
dom对象 _> jq对象
$(dom对象)
jq对象 _> dom对象
jq对象[0]
选择器
基本选择器
通用选择器 $('*')
标签选择器 $('div')
id选择器 $('#id')
类选择器 $('.class')
组合选择器 $('div.class1') 并集
$('div,p') 交集
层级选择器
后代选择器 $('div span')
子代选择器 $('#li>span')
毗邻选择器 $('#li+span')
弟弟选择器 $('#li~span')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <ul href="" id="ul">
<li> 1
<ul>
<li>11</li>
</ul>
</li>
<li id="l2">2</li>
<li> 3<a class="c1" href="www.baidu.com">百度</a></li>
<li> 4</li>
</ul>
<button id="b1">点击</button>
<script src="jquery.js"></script>
<script>
console.log($("#ul li"));
$("button").click(function () {
alert(123)
});
var b1 = document.getElementById("b1");
b1.onclick = function () {
alert(456)
}
</script>
</body>
</html>
属性选择器
$('[属性]')
$('[属性="值')
$('[属性!="值')
$('[属性^="值')
$('[属性$="值')
$('[属性*="值')
筛选器
$('选择器:筛选器')
:first 第一个
:last 最后一个
:eq(index) 按照索引
:has(选择器) 包含某个子代的父标签
:not(选择器) 排除
筛选方法
.first() last
.eq(index)
.siblings() 兄弟
.parent()
.children()
.next() .nextAll() .nextUntil('#l2')
.prev() .prevAll() .prevUntil()
.has() 包含某个子代的父标签
.filter('#l2') 当前标签包含选择器
.not(选择器) 不包含
值的操作
.text() 文本
.html() HTML标签
绑定事件
$('button').click(function () {
alert(123)
})
标签的操作
父标签.append(子标签) // 子标签添加到父标签的子代的最后
子标签.appendTo(父标签)
父标签.prepend(子标签) // 子标签添加到父标签的子代前面
子标签.prependTo(父标签)
a.after(b) // 在a标签后面添加b标签
a.before(b) // 在a标签前面添加b标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul> </div> <button id="b1">添加</button>
<button id="b2">添加2</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
var li = $('<li>')
li.text('3') $('#b2').click(function () { var li = $('<li>')
li.text('3')
// $('li:eq(1)').after(li)
$('li:eq(2)').before(li)
}) //
// $('#b1').click(function () {
//
// var li = $(document.createElement('li'))
// // li.innerText = '5'
// var num = $('li:last').text()
// // console.log(typeof (num))
// num++;
// li.text(num)
// // console.log(li)
// // $('ul').append("<li>5</li>")
// // $('ul').append(li)
// // li.appendTo($('ul'))
//
// // $('ul').prepend(li)
// li.prependTo($('ul'))
//
//
// }) $('#b1').click(function () {
$('ul').prepend(li) })
$('#b2').click(function () { $('ul').append(li)
}) </script> </body>
</html>
删除
.remove() 删除标签和事件
.detach() 删除标签 保留事件
.empty() 清空标签中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul> </div> <button id="b1">删除</button>
<button id="b2">恢复</button>
<button id="b3">清空</button> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script> var last; $('#b3').click(function () {
// $('li').remove()
$('ul').empty() }); $('#b1').click(function () {
last = $('li:last').detach() }); $('#b2').click(function () {
$('ul').append(last) }); $('li').click(function () {
alert($(this).text()) })
</script> </body>
</html>
克隆 复制
.clone() 复制标签
.clone(true) 复制标签 也有事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div>
<ul>
<li>1</li>
<li>2</li> </ul> </div> <button id="b1">添加</button> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script> $('#b1').click(function () { var li = $('li:last').clone(true)
li.text(Number(li.text()) + 1)
$('ul').append(li) }) $('li').click(function () {
alert($(this).text()) })
</script> </body>
</html>
替换
a.replaceWith(b) // 用b替换a
b.replaceAll(a) // 用b替换a a可以是标签 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div>
<ul>
<li>1</li>
<li>2</li> </ul> </div> <button id="b1">替换</button> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script> $('#b1').click(function () {
var l2 = $('li:last')
var li = l2.clone() li.text(Number(li.text()) + 1) // l2.replaceWith(li)
li.replaceAll('li:eq(1)') }) $('li').click(function () {
alert($(this).text()) }) </script> </body>
</html>
属性的操作
.attr('属性') // 获取属性的值
.attr('属性','值') // 设置属性的值
.removeAttr('属性') // 删除某个属性
.prop('checked') // radio checkbox select(option)
.prop('checked',true)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <a href="https://www.baidu.com" id="a1" class="c1">百度</a> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </body>
</html>
值的操作
val()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <form action=""> <input type="text">
<input type="radio" name="sex" value="1">
<input type="radio" name="sex" value="2">
<input type="checkbox" name="hobby" value="唱">
<input type="checkbox" name="hobby" value="跳">
<input type="checkbox" name="hobby" value="rap">
<input type="checkbox" name="hobby" value="篮球"> <select name="hobby2" id="" multiple>
<option value="1" selected>唱</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="3">rap</option>
<option value="4">篮球</option>
</select> </form> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </body>
</html>
事件的绑定和解绑
$('button').bind('click',function () {
})
$('button').click(function () {
})
$('button').unbind('click')
各种事件
click 点击
hover 悬浮
blur 失去焦点
focus 获取焦点
change 内容变化
keyup 按键启动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <p><input type="text" id="i1"></p>
<p>
<select name="" id="s1">
<option value="">北京</option>
<option value="">上海</option>
</select>
</p> <button>点击</button> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> // $('button').click(function () {
// alert(123)
// }) $('button').bind('click', function () {
alert(123);
$('button').unbind('click')
}) $('#i1').focus(function () {
console.log('聚焦了')
$(this).val('')
$(this).next().remove() }) $('#i1').blur(function () {
console.log('失去焦点了')
if ($(this).val() === '') {
var sp = $('<span>')
sp.text('不能为空')
$(this).after(sp) }
}) $('#i1').change(function () {
console.log('内容变化了') }) $('#i1').keyup(function (e) {
// console.log(e.keyCode)
if (e.keyCode === 27) {
alert(123)
} }) $('#s1').change(function () {
console.log('内容变化了') }) </script> </body>
</html>
模态框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.mask{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(144,144,144,0.5);
}
.motai{
position: fixed;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
width: 400px;
height: 400%;
background-color: rgba(245,73,229,0.55);
}
</style>
</head>
<body> <button id="b1">登录</button> <div class="c1 hide">
<div class="mask"></div>
<div class="motai">
<p><input type="text"></p>
<p><input type="text"></p>
<button>提交</button>
<button>取消</button>
</div>
</div>
<script src="jquery.js"></script>
<script>
$("#b1").click(function () {
$(".c1").removeClass("hide")
// $(".c1").addClass("hide")
// $(".c1").toggleClass("hide")
});
$(".motai button").click(function () {
$(".c1").addClass("hide")
});
$(window).keyup(function (e) {
if (e.keyCode === 27){
$(".c1").addClass("hide")
}
})
</script>
</body>
</html>
表格的操作包含全选取消反选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide {
display: none;
}
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(144, 144, 144, 0.5);
}
.motai {
position: fixed;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
width: 400px;
height: 400px;
background-color: rgba(245, 73, 229, 0.55);
}
</style>
</head>
<body>
<button id="b1">新增</button>
<button onclick="selectAll()">全选</button>
<button onclick="Cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>宝元</td>
<td>不详</td>
<td>钻</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>和尚</td>
<td>男</td>
<td>合气道</td>
<td>
<button>删除</button>
</td>
</tr>
<tr class="hide">
<td><input type="checkbox"></td>
<td>2</td>
<td>和尚</td>
<td>男</td>
<td>合气道</td>
<td>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<div class="c1 hide">
<div class="mask"></div>
<div class="motai">
<p>
<label for="name">姓名</label>
<input type="text" id="name">
</p>
<p>
<label for="sex">性别</label>
<select name="sex" id="sex">
<option value="男">男</option>
<option value="女">女</option>
<option value="不详">不详</option>
</select>
</p>
<p>
<label for="hobby">爱好</label>
<input type="text" id="hobby">
</p>
<button id="submit">提交</button>
<button>取消</button>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#b1').click(function () {
$('.c1').removeClass('hide');
// $('.c1').addClass('hide');
// $('.c1').toggleClass('hide');
});
$('.motai button').click(function () {
$('.c1').addClass('hide')
});
$(window).keyup(function (e) {
if (e.keyCode === 27) {
$('.c1').addClass('hide')
}
});
// $('#submit').click(function () {
// var name = $('#name')
// var sex = $('#sex')
// var hobby = $('#hobby')
// var hide_tr = $('tr:last')
// var tr = hide_tr.clone(true)
// tr.removeClass('hide')
//
// var td = tr.find('td');
//
//
// td.eq(1).text($('tr:not(.hide)').length)
// td.eq(2).text(name.val())
// td.eq(3).text(sex.val())
// td.eq(4).text(hobby.val())
// name.val('')
// sex.val('男')
// hobby.val('')
//
// hide_tr.before(tr)
//
//
// })
$('tr button').click(function () {
$(this).parents('tr').remove()
});
$('#submit').click(function () {
var name = $('#name');
var sex = $('#sex');
var hobby = $('#hobby');
var num = $('tr').length;
var string = `<tr><td><input type="checkbox"></td><td>${num}</td><td>${name.val()}</td><td>${sex.val()}
</td><td>${hobby.val()}</td><td><button>删除</button></td></tr>`;
// $('tbody').append('<tr>\n' +
// ' <td><input type="checkbox"></td>\n' +
// ' <td>' + num + '</td>\n' +
// ' <td>' + name.val() + '</td>\n' +
// ' <td>' + sex.val() + '</td>\n' +
// ' <td>' + hobby.val() + '</td>\n' +
// ' <td>\n' +
// ' <button>删除</button>\n' +
// ' </td>\n' +
// '\n' +
// ' </tr>')
$('tbody').append(string)
});
function selectAll() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
input.checked=true;
}
}
function Cancel() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
input.checked=false;
}
}
function reverse() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
if(input.checked){
input.checked=false;
}else{
input.checked=true;
}
}
}
</script>
</body>
</html>
肖哥讲jquery：的更多相关文章
- 精神哥讲Crash（一）：UnsatisfiedLinkError
版权声明:本文为腾讯Bugly原创文章,如需转载,请标明出处. 大家好,我是腾讯Bugly的精神哥(英文名:spirit),是Bugly资深码奴的同时,又是Bugly神秘的Crash实验室研究员哦 ...
- 继续我们的学习。这次鸟哥讲的是LVM。。。磁盘管理 最后链接文章没有看
LVM...让我理解就是一个将好多分区磁盘帮到一起的玩意,类似于烙大饼...然后再切 新建了一个虚拟机,然后又挂了一个5G的硬盘,然后分出了5块空间,挂载到了虚拟机上.这些步骤很简单 fdisk ...
- 【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作
什么是跨域 跨域,它是不同的域名(服务器)之间的相互的资源之间的访问. 当协议,域名,端口号任意一个不同,它们就是不同的域. 正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的. 跨域的 ...
- 听桶哥讲session和cookie
首先,cookie和session是什么关系? 他们的关系很简单,利用和被利用的关系. 话说,由于http协议的无状态特性,同一client两个不同的请求之间完全独立,没有很好的办法进行一些数据共享, ...
- python27期尚哥讲数据库：
1.下载:https://www.mysql.com/ DOWNLOADS MySQL Community (GPL) Downloads »-- MySQL Community Server Loo ...
- python27期尚哥讲TCP：
TCP:传输控制协议(使用情况多于udp) 稳定:保证数据一定能收到 相对UDP会慢一点 web服务器一般都使用TCP(银行转账,稳定比快要重要)TCP通信模型: 在通信之前,必须先等待建立链接 TC ...
- python27期尚哥讲TFTP：
TFTP介绍 :TFTP(Trivial File Transfer Protocol,简单⽂件传输协议)是TCP/IP协议簇中的⼀个⽤来在客户端与服务器之间进⾏简单⽂件传输的协议使用tftp这个协议 ...
- python27期尚哥讲网络编程：
python27day26网络编程----------------------------------------------------------------------------------- ...
- python27期尚哥讲并发编程：
python27day23并发编程----------------------------------------------------------------------------------- ...
随机推荐
- jt格式文件读取，osg显示插件更新
osgdb_jt 最近还是更新了一下 osgdb_jt 插件.解码jt格式核心库jt_toolkit,通过静态链接到Plugin jt产生osgdb_jt插件,使得osg可以可视化jt格式文件. 用法 ...
- 安装pymssql
直接安装失败 https://www.lfd.uci.edu/~gohlke/pythonlibs/#pymssql 去下载对应的 pymssql whl版本 之后 pip install whe ...
- 机器学习--用PCA算法实现三维样本降到二维
对于维数比较多的数据,首先需要做的事就是在尽量保证数据本质的前提下将数据中的维数降低.降维是一种数据集预处理技术,往往在数据应用在其他算法之前使用,它可以去除掉数据的一些冗余信息和噪声,使数据变得更加 ...
- LeetCode 200. 岛屿数量
习题地址 https://leetcode-cn.com/problems/number-of-islands/ 给定一个由 '1'(陆地)和 '0'(水)组成的的二维网格,计算岛屿的数量.一个岛被水 ...
- C语言的指针用法：输入一堆字符，把非字母的删去。
char *p,a[20]; int i; gets(a); //这个语句不同于getchar(),后者只能一次输入一个,而前者可以一次输完所有的字符!!! p=a; //这个语句 ...
- JVM-Jinfo命令
jinfo JVM Configuration info这个命令作用是实时查看和调整虚拟机运行参数. 之前的jps -v口令只能查看到显示指定的参数,如果想要查看未被显示指定的参数的值就要使用jinf ...
- 用CSS绘制实体三角形
用CSS绘制实体三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: .box { width: 0; height: 0; border-width: 100px; borde ...
- Paper | Attention Is All You Need
目录 1. 动机详述 2. 相关工作 3. 转换器结构 3.1 注意力机制详解 3.1.1 放缩的点积注意力机制 3.1.2 多头注意力机制 3.2 全连接网络 3.3 编码位置信息 [这是一篇400 ...
- 前端 web mime类型引起的 常见404错误
mime 类型设置参考https://www.w3school.com.cn/media/media_mimeref.asp
- mac--“-bash: brew: command not found”，怎么解决？
报错 “-bash: brew: command not found” 执行下面命令,安装HomeBrew ruby -e "$(curl -fsSL https://raw.githubu ...