肖哥讲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并发编程----------------------------------------------------------------------------------- ...
随机推荐
- 使用STS4新建springboot项目
1.配置maven,自定义setting文件和仓库,一定要用阿里云镜像地址下载依赖,官方太坑了,整了半天都没弄好,原来是下载太慢文件损坏 <mirror> <id>alimav ...
- Windows下同时安装python2和python3如何兼容版本
引言:因学习需要把python2和python3都安装了,为了避免使用过程中混淆版本在网上找了一些解决方案,亲测可用.方法如下: 分别下载并安装Python2.x和Python3.x. 配置环境变量. ...
- 80%应聘者都不及格的JS面试题
共 5024 字,读完需 6 分钟,速读需 2 分钟,本文首发于知乎专栏前端周刊.写在前面,笔者在做面试官这 2 年多的时间内,面试了数百个前端工程师,惊讶的发现,超过 80% 的候选人对下面这道题的 ...
- idea配置pyspark
默认python已经配好,并已经导入idea,只剩下pyspark的安装 1.解压spark-2.1.0-bin-hadoop2.7放入磁盘目录 D:\spark-2.1.0-bin-hadoop2. ...
- RPA 案例：银行综合对账系统权限更改中的难点解决
需求内容 根据表格中给出的信息(提供了机构名称.机构代码.用户信息.具体操作等),选择系统管理 → 用户信息管理 → 用户维护,点击用户所在的机构,在机构中选择需调整的用户,进行相应的增删改操作. 关 ...
- 华为mate10 pro内置浏览器出现的令人头疼的样式兼容问题
问题描述: 下图红色框区域内容在华为mate10 pro(以下简称mate10)内置浏览器中整体向左偏移,没有居中,其它手机浏览器都无该问题,如下图 问题分析 经过一番追根溯源,我发现是 bo ...
- 为何我建议1-3年的Java程序员仔细看看这篇文章
此文的目的是为了督促自己去不断学习,让自己有更明确的方向去提升自己.以技能树为基础,以面试要点为大纲,我觉得比抓住什么看什么要更有目的,更能坚持下去.世界瞬息万变,我们要时刻准备着.时刻提高着自己,才 ...
- C# - WinFrm应用程序MessageBox自动关闭小实验
概述 在程序中MessageBox弹出的对话框,用于向用户展示消息,这是一个模式窗口,可阻止应用程序中的其他操作,直到用户将其关闭.但是有时候在自动化程序中,如果弹出对话框,程序将会中断,等待人工的干 ...
- java基础(30):DBUtils、连接池
1. DBUtils 如果只使用JDBC进行开发,我们会发现冗余代码过多,为了简化JDBC开发,本案例我们讲采用apache commons组件一个成员:DBUtils. DBUtils就是JDBC的 ...
- 关于yield和yield from
一.简单示例 def yield_func(): for _ in range(2): yield "12" def yield_from_func(): for _ in ran ...