day46:jQuery
目录
1.jQuery初识
/* 在body部分建立一个id为d1的h1标签 */
var d1 = $('#d1'); // 所得到的d1是一个jQuery对象 → d1:jQuery.fn.init [h1#d1]
var d = document.getElementById('d1'); // 所得到的d是一个原生dom对象 → d1:<h1 id='d1'></h1>
/* 注意：jquery对象和dom对象之前不能调用互相的方法 */ /* jquery对象和dom对象可以互相转换 */
d1[0] // jQuery对象转化成dom对象
$(d) // dom对象转化成jQuery对象
2.选择器
2.1 id选择器
$('#d1') // 对比js：document.getElementById('d1')
2.2 类选择器
$('.c1') // 对比js:document.getElementByClassName('c1')
2.3 元素选择器
$('span') // 对比js：document.getElementByTagName('span')
2.4 组合选择器
$('#d1,.c2')
// html代码
<div id="d1">
这是d1
</div>
<div class="c2">
这是c2
</div>
// css代码:
#d1,.c2{
background-color: red;
height: 100px;
width: 100px;
border-bottom: 1px solid black;
}
// jquery代码:
// 注意：只有jQuery对象才有.css属性,DOM对象没有.css属性
$('#d1,.c2').css('background-color','green'); // 将id为d1和class为c2的标签的背景颜色都设置为绿色
$('#d1,.c2')[1]; // 索引为1的dom对象
$('#d1,.c2').eq(1); // 索引为1的jQuery对象
2.5 后代选择器
// 格式：$("form input")
2.6 属性选择器
// html代码:
<div class="c1" xx="oo">
这是c1
</div>
<input type="text" name="username"> // css代码:
[xx]{
color:purple;
} // input标签: type='xx' [type='text']即可找到对应的input标签
$('[xx]').css('color','green');
$('[type="text"]').css('color','red');
2.7 表单选择器
// $(":input") 找到所有input标签
// $(":text") 找到所有input标签，且type=text的标签
// $(":password") 找到所有input且type=password的标签
// $(":radio") 找到所有input且type=radio的标签
// $(":checkbox") 找到所有input且type=checkbox的标签
//html代码:
<form action="">
<input type="text" id="username">
<input type="text" id="username2">
<input type="password" id="pwd">
<input type="submit">
</form>
// jQuery代码:找到所有的type=text的input标签
$(':text');
2.8 筛选器方法
<!-- html代码 -->
<ul>
<li>谢一峰</li>
<li class="c1">王子宇</li>
<li>孙波</li>
<li class="c2">石淦</li>
<li>
<span>白雪冰</span>
</li>
<li>方伯仁</li>
</ul>
2.8.1 parent()
var c = $('.c1'); // 找到c1类所对应的标签对象
c.parent(); // 找自己的父亲标签 只找一代
c.parents(); // 找自己的祖先辈标签 会找到所有代
c.parentsUntil('body'); // 往上找父级标签,直到找到body标签为止,不包含body标签
2.8.2 children()
var u = $('ul');
u.children(); // 找到所有儿子标签
u.children('.c1'); // 找到符合.c1选择器的所有儿子标签
2.8.3 next()
var c = $('.c1');
c.next(); // 找到下面的那个兄弟标签
c.nextAll(); // 找到下面所有兄弟标签
c.nextUntil('.c2'); // 找到下面到某个兄弟标签为止,不包含那个兄弟标签
2.8.4 prev()
var c = $('.c1');
c.prev(); // 找到上面的那个兄弟标签
c.prevAll(); // 找到上面所有兄弟（注意顺序都是反的）顺序:4-3-2-1
c.prevUntil('.c1'); // 找到上面到某个兄弟为止,不包含那个兄弟（注意顺序都是反的）
2.8.5 siblings()
c.siblings(); // 找到不包含自己的所有兄弟
c.siblings('.c1'); // 筛选兄弟中有class类值为c1的标签
2.8.6 find() 找后代
$('li').find('span'); // 找li标签里面的span标签->等同于css的li span后代选择器
$('li span') // 和$('li').find('span')等同效果
2.8.7 first()和last() 和eq(索引值)
$('li').first(); // 找所有li标签中的第一个
$('li').last(); // 找所有li标签中的最后一个
$('li').eq(0); // 按照索引取对应的那个标签,索引从0开始
$('li').eq(-1); // 最后一个
$('li')[ 索引 ] // 通过中括号索引取值获取的是原生dom对象，而用eq(索引值)获取的是jQuery对象
3.文本操作
在jQuery中使用text()和html()进行文本操作, 和js中的innerText和innerHTML是等同的
// 设置文本
$('#xiaolin').text('小林望明月'); // 仅仅只能设置文本
$('#xiaolin').text('<a href="">小林望明月</a>'); // text不能设置带链接的
$('#xiaolin').html('<a href="">小林望明月</a>'); // 这种带链接的要用html // 获取文本
$('#xiaolin').text(); // '小林望明月'
$('#xiaolin').html(); // '<a href="">小林望明月</a>'
4.class类值操作
// 添加类值
$('.c1').addClass('c2'); // 等同于js中的add方法 // 删除类值
$('.c1').removeClass('c2'); // 等同于js中的remove方法 // 切换：有就删除，没有就添加
$('.c1').toggleClass('c2'); // 等同于js中的toggle方法
5.css样式操作
<div class="c1"></div> // 给类对应的标签设置样式
$('.c1').css({'background-color':'pink','width':'300px'});
6.值操作
<!--html代码-->
<input type="text" id="username">
<input type="radio" class="a1" name="sex" value="1">男
<input type="radio" class="a1" name="sex" value="2">女
<input type="checkbox" class="a2" name="hobby" value="1">抽烟
<input type="checkbox" class="a2" name="hobby" value="2">喝酒
<input type="checkbox" class="a2" name="hobby" value="3">烫头
<select name="city" id="s1">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<select name="lover" id="s2" multiple>
<option value="1">波多</option>
<option value="2">苍井</option>
<option value="3">小泽</option>
</select>
// jquery代码
// 1.普通文本输入框：
// 获取输入框中的值
$(':text').val();
// 设置输入框中的值
$(':text').val('xxx'); // 2. radio 单选框
// 获取值：
$(':radio:checked').val();
// 设置值：
$(':radio').val(['2']); // 将input中type='radio'的标签默认选中 // 3.checkbox 多选框
// A.通过循环获取多选框中的每个值
// 循环方式1
var s = $(':checkbox:checked');
for (var i=0;i<s.length;i++){
console.log(s.eq(i).val());
}
// 补充$.each循环（循环方式2）
// 1.循环普通数组
var a = [11,22,33];
$.each(a,function(k,v){
console.log(k,v); // k是索引值，v是数组的值
})
// 2.循环标签数组
var s = $(':checkbox:checked');
$.each(s,function(k,v){
console.log(k,v);// k是索引值，v是dom标签对象
})
// B.设置值
$(':checkbox').val(['1', '3']);// 纯数字和字符串数字都能够识别
$(':checkbox').val([2,3]); // 4.select 单选下拉框
// 获取值
$('#s1').val();
// 设置值
$('#s1').val(['2']); //5.select-multiple 多选下拉框
// 获取值
$('#s2').val();
// 设置值
$('#s2').val(['1','2']);
7.注意点：button按钮提交form表单数据
<body>
<form action="">
<input type="text" name="username">
<input type="submit">
<button>确认</button> <!-- <button type="submit">确认</button> （不写type默认是submit）-->
<!--1.在form表单里面，且type类型是submit 有提交数据的效果 --> <!-- <button type="button">确认</button>-->
<!--2.虽然在form表单里面，但是type类型为button 所以没有提交数据的效果 -->
</form> <!--3.如果放到form表单外面，就算type是submit类型，也是没有提交数据的效果的-->
<input type="submit">
<button>确认</button>
</body>
8.jquery选择器补充
/* 表单对象属性选择器 */
:checked // 找到被选中的input标签和option标签
:selected // 找被选中的select标签中的option标签
:disabled // 不可操作的标签
:enabled // 可操作的标签
<!-- 在html代码中 可以对这些标签的默认状态进行设置 -->
<input type="text" id="username" disabled> <!-- input框不可操作 -->
<input type="radio" class="a1" name="sex" value="1" checked>男 <!-- 默认选中男 -->
<input type="radio" class="a1" name="sex" value="2">女
<input type="checkbox" class="a2" name="hobby" value="1" checked>抽烟 <!-- 默认选中抽烟 -->
<input type="checkbox" class="a2" name="hobby" value="2">喝酒
<input type="checkbox" class="a2" name="hobby" value="3">烫头
<select name="city" id="s1">
<option value="1">北京</option>
<option value="2" selected>上海</option> <!-- 默认选中上海 -->
<option value="3">深圳</option>
</select>
<!-- 总结 -->
<!-- 1.enabled和disabled可以应用在input输入框中,radio单选框和checkbox多选框中，select下拉框中
2.checked只能应用在radio单选框和checkbox多选框中
3.selected只能应用在select下拉框中-->
9.模态对话框示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 点击登录时，除了登录框部分，其他部分为阴影区域，这部分是设置阴影区域的样式 */
.shadow{
position: fixed; /* 固定定位，基于窗口的位置移动 */
top:0;
left:0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.3);
z-index: 9; /* z轴数值为9 用来确保是覆盖别人还是被别人覆盖 */
} /* 点击登录时，会出现一个登录页面的太狂，这部分是设置登录弹框的样式 */
.mode{
position: fixed;
height: 400px;
width: 300px;
background-color: #ffffff;
z-index: 10; /* z轴数值为10，而shadow阴影的z轴数值为9 所以当登录弹框会浮在阴影上面 */
top:50% ;
left:50% ;
margin-top: -200px;
margin-left: -150px; }
.hide{
display: none;
}
</style>
</head>
<body> <h1>性感荷官、在线发牌</h1> <div>还有一些广告词</div>
<button id="btn">登录</button>
<div class="mode hide"> <!-- 默认登录弹框是隐藏的 -->
<h1>请登录会员</h1>
<p>
用户名：<input type="text">
密码：<input type="password">
</p>
<p>
<button id="confirm">确认</button>
<button id="cancel">取消</button>
</p>
</div> <div class="shadow hide"></div> <!-- 默认阴影效果是隐藏的 --> </body>
<script src='jquery.js'></script>
<script>
// 当点击登录按钮时
/* 1.去除shadow的hide效果，使shadow使用本来定义好的css样式(灰色阴影效果) */
/* 2.去除mode的hide效果，让登录弹框显示出来 */
$('#btn').click(function (){
$('.shadow,.mode').removeClass('hide');
}) // 当点击取消按钮时
/* 1.给shadow添加hide效果 让shadow没有任何样式 所以css阴影效果自然也没有了 */
/* 2.给mode添加hide效果 当点击取消按钮时 登录弹框消失 */
$('#cancel').click(function (){
$('.shadow,.mode').addClass('hide');
}) </script>
</html>
10.创建标签
var a = document.createElement('a'); // 创建一个a标签的dom对象
// 使用jQuery创建a标签对象，并且为a标签对象添加属性和值
$('<a>',{
text:'这还是个链接',
href:'http://www.baidu.com',
class:'link',
id:'baidu',
name:'baidu'
})
11.文档操作
// 往标签内部的后面添加元素
// 1.append方法：父标签对象.append(子标签对象)
var a = $('<a>',{href:"",text:'百度'});
$('div').append(a);
var s = '<a href="">xx</a>';
$('div').append(s);
// 2.appendTo：子标签对象.appendTo(父标签对象)
a.appendTo($('div')); // 往标签内部的前面添加元素
// 1.prepend方法
var a = $('<a>',{href:"",text:'xxx'});
$('div').prepend(a)
// 2.prependTo方法
a.prependTo($('div')); // 往标签外部的后面添加
// 1.after方法
$('div').after('<a href="">xxxxx</a>');
// 2.insertAfter方法
a.insertAfter($('div')); // 往标签外部的前面添加
// 1.before方法
$('div').before('<a href="">xxxxx</a>');
// 2.insertBefore方法
a.insertBefore($('div'));
12.清空标签
// 清除div中所有内容，只剩下一个没有任何内容的div标签
/* 这三个用哪个都行 没什么区别 */
$('div').text('');
$('div').html('');
$('div').empty();
13.删除标签
// 清除所有内容，包括标签自己本身
$('div').remove();
14.克隆
// html代码
<div class="c1">
<button class="btn">点击我!有超多惊喜</button>
</div> // js代码
$('.btn').click(function (){
// var btn = $(this).clone(); // 不克隆绑定的事件
// 通俗说：就是点击第一个按钮可以克隆，点击克隆生成的按钮不可以克隆 var btn = $(this).clone(true); //克隆连带事件
$('.c1').append(btn);
// 通俗说：无论点击哪个按钮，都可以克隆。因为克隆的按钮也连带克隆事件
})
15.模板字符串
// jQuery中的模板字符串其实就和python中的占位符一个道理
var a = '大海啊';
var ss = `${a},全是水`; // 输出：大海啊，全是水
// 和python的f字符串一样
/* name = 'xx'
s = f'{name}你好呀'
print(s) */
16.事件绑定
// 方式1
$('#btn').click(function (){
$('.shadow,.mode').removeClass('hide');
}) // 方式2
$('.c1').on('click',function (){
$(this).addClass('c2');
})
17.事件冒泡
什么是事件冒泡？当父级或者祖先辈标签和子标签绑定了相同的事件时，比如点击事件，那么当点击子标签时，会一层层触发父级标签的点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: green;
height: 100px;
width: 300px;
}
.c2{
background-color: red;
height: 50px;
width: 50px;
}
</style>
</head>
<body> <div class="c1">
<div class="c2"></div>
</div> </body>
<script src='jquery.js'></script>
<script>
$('.c1').click(function (){
alert('这是父标签');
});
$('.c2').click(function (e){
alert('这是子标签');
return false; // 阻止事件冒泡：方式1
// e.stopPropagation() // 阻止时间冒泡：方式2
})
</script>
</html>
18.事件委托
什么是事件委托？事件委托是通过事件冒泡的原理，利用父级去触发子级的事件
// html部分
<div class="c1">
<button class="btn">屠龙宝刀，点击就送！</button>
</div> // js代码部分
$('.c1').on('click','.btn',function (){
var btn = $(this).clone(); // 这里的this指代的还是btn对象，并不是.c1类对象
$('.c1').append(btn);
})
19.属性操作
prop方法:针对的是checked,selected,enabled,disabled
$('#sex').prop('checked',true); //设置选中
$('#sex').prop('checked',false); // 取消选中
$('#uname').prop('disabled',true); //设置不可编辑
$('#uname').prop('disabled',false); //设置可以编辑
attr方法:获取值,修改值
$('#d1').attr('id') // 获取属性对应的值
$('#d1').attr({'class':'c1','name':'mike'}); // 设置属性
20.逻辑运算符
and && // 逻辑与
or || // 逻辑或
not ! // 逻辑非
21.jQuery中简单动画效果
// css代码
.c2{
background-image: url("meinv.png");
background-size: 100%;
height: 350px;
width: 400px;
display: none;
}
html
<div class="c2"></div> // js代码
$('.c2').show(1000);
$('.c2').hide(1000);
$('.c2').slideDown(1000);
$('.c2').slideUp(3000);
22.常用事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #ff6700;
height: 200px;
width: 200px;
}
.c2{
background-image: url("meinv.png");
background-size: 100%;
height: 350px;
width: 400px;
display: none;
}
</style>
</head>
<body> <input type="text" id="username">
<div class="c2"></div>
</body> <script src='jquery.js'></script>
<script>
// 1.失去光标时触发的事件：blur
$('#username').blur(function (){
$(this).css({'background-color':'yellow'});
}); // 2.获取光标时触发的事件：focus
$('#username').focus(function (){
$(this).css({'background-color':'blue'});
}); // 3.域内容发生变化时触发的事件：change
/* ---> 如果是给input标签绑定的change事件，
那么只有input标签中的内容发生变化，并且失去光标时才会触发 */
$('#username').change(function (){
$(this).css({'background-color':'green'});
}); // 4.鼠标进入(触碰)时触发的事件：mouseenter
$('.c1').mouseenter(function (){
$(this).css({'background-color':'red'})
}) // 5.鼠标离开时触发的事件：mouseleave
$('.c1').mouseleave(function (){
$(this).css({'background-color':'yellow'})
}) // 6.鼠标悬浮事件：hover
$('.c1').hover(
// 鼠标进入时触发事件
function (){
$(this).css({'background-color':'red'})
},
// 鼠标离开时触发事件
function (){
$(this).css({'background-color':'yellow'})
}
) ; // 7.实时捕获输入内容的事件：input
$('#username').on('input',function (){
console.log($(this).val());
})
</script>
</html>
day46:jQuery的更多相关文章
- day46 html
老师的笔记: day46 课程安排 HTML CSS JS基础 DOM操作 jQuery Bootstrap pymysql Django基础 项目实战 Vue.js 今日概要: "PUT ...
- python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
随机推荐
- 面试被问：如果系统 CPU 突然飙升且 GC 频繁，你该如何排查？
出自:开源中国 原文:系统运行缓慢,CPU 100%,以及Full GC次数过多问题的排查思路 处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题. ...
- 006_go语言中的if else条件语句
代码演示 package main import "fmt" func main() { if 7%2 == 0 { fmt.Println("7 is even&quo ...
- 操作属性、操作样式 - DOM编程
1. 操作属性 1.1 HTML 属性与 DOM 属性的对应 <div> <label for="username">User Name: </lab ...
- 教你看懂Docker和K8S！
转载于 https://my.oschina.net/jamesview/blog/2994112 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这家公司主要 ...
- java_字节流、字符流的使用方法
字节流 字节输出流[OutputStream] java.io.OutputStream 抽象类是表示字节输出流的所有类的超类,将指定的字节信息写出到目的地.它定义了字节输出流的基本共性功能方法. p ...
- C - 一个C语言猜字游戏
下面是一个简陋的猜字游戏,玩了一会儿,发现自己打不过自己写的游戏,除非赢了就跑,最高分没有过1000. 说明:srand(time(NULL))和rand(),srand,time和rand都是函数, ...
- [转]解决The requested resource is not available的方法
此博文为转载博文,首先感谢原作者 HTTP Status 404(The requested resource is not available)异常主要是路径错误或拼写错误造成的,请按以下步骤逐一排 ...
- Centos7重置root密码（详细版）
修改了root密码,步骤如下: 步骤一:在开机出现如下界面的时候就按“e”键 步骤二:在步骤一按下”e”键之后,出现如下界面,按 ↓键一直到底部找到“LANG=zh_CN.UTF-8”这句,在 ...
- 《Java从入门到失业》第二章：Java环境（二）：JDK、JRE、JVM
2.2JDK.JRE.JVM 在JDK的安装目录中,我们发现有一个目录jre(其实如果是下一步下一步安装的,在和JDK安装目录同级目录下,还会有一个jre目录).初学Java的同学,有时候搞不清楚这3 ...
- 简述 jpg png gif png-8 png-24 的区别
Gif 格式的特点: 1.透明性,GIF是一种布尔透明类型,既可以是全透明,又可以是不透明,但是不可以半透明: 2.动画 GIF支持动画. 3.无损耗性 GIF是一种无损耗的图像格式,也 ...