提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
JQuery
JQuery引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>32期皇家赌场</h1>
</div>
</body>
<!--<script src="jquery.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</html>
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对象
JQuery基础选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="c1">文文</li>
<li>妮妮</li>
<li class="c1">紫薯</li>
<li>路飞</li>
<li id="weige">索隆</li>
<li>山治</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
id选择器
$("#weige");
类值选择器
$(".c1"); // 类值选择器
$(".c1").css({'color':'green'}); // 设置字体颜色
标签选择器
$("li"); // 标签选择器,写标签名称
</script>
</html>
组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
xxxx
</div>
<div id="d1">
oooo
</div>
</body>
// 引入js文件或者写js代码的时候,最好写到html文件的最下方,但是要在html标签内部
<script src="jquery.js"></script>
<script>
// 示例 组合选择器 同时使用多个选择器去找标签
$("#d1,.c1");
$("#d1,.c1").css({'color':'red'});
</script>
</html>
层级选择器
概念：层级选择器是找儿子或者后代使用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<h1>只要python学的好,媳妇年年在高考</h1>
</div>
<h1>
只要你有钱,对象刚进幼儿园
</h1>
</body>
<script src="jquery.js"></script>
<script>
// 示例
$(".c1 h1").css({"color":'green'}); // 找c1下的h1标签
</script>
</html>
属性选择器
// 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');
表单选择器
// $(":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');
筛选器方法
<!-- html代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="c1">程心</li>
<li >罗辑</li>
<li id="singer">
<span class="s1">汪淼</span>
<span>波多</span>
</li>
<li>史强</li>
<li class="superman">威廉二世</li>
<li>共产国际</li>
</ul>
</body>
<script src="jquery.js"></script>
parent() 找标签的父辈
var res = $("#singer").parent(); // 找该标签的父辈
var res = $("#singer").parents(); // 找到所有的直系祖先辈
$("#singer").parentsUntil('body'); // 直到找到符合某个选择器的标签为止,不包含该选择器对应的那个标签
children() 找儿子辈的标签
$("#singer").children(); // 找儿子辈的标签
$("#singer").children('.s1'); // 对找到的儿子标签进行过滤 $("#singer").children('选择器');
next() 找到下一个兄弟标签
$("#singer").next(); // 找到下一个兄弟标签
$("#singer").nextAll(); // 找到它下面的所有兄弟标签
$("#singer").nextUntil('.superman'); // 找它下面的兄弟标签,直到找到符合某个选择器的标签为止,并且不包含该标签
prev() 找到上一个兄弟标签
$("#singer").prev(); // 找到上一个兄弟标签
$("#singer").prevAll(); // 找到它上面所有的兄弟标签
$("#singer").prevUntil('.c1'); // 找它上面的兄弟标签,直到找到符合某个选择器的标签为止,并且不包含该标签
siblings() 找到所有兄弟标签,不包含自己
$("#singer").siblings() // 找到所有兄弟标签,不包含自己
$("#singer").siblings('.c1') // 找到兄弟标签中符合选择器的兄弟标签
find() 找到后代中所有符合条件的标签
$('ul').find('span'); // 找到后代中所有符合条件的标签
$('li').find('span'); // 找li标签里面的span标签->等同于css的li span后代选择器
$('li span') // 和$('li').find('span')等同效果
first()和last() 和eq(索引值)
$('li').first(); // 找到所有找到的标签中的第一个标签,获得的是jq对象
$('li').last(); // 找到最后一个标签
$('li').eq(0); // 通过索引取值找到标签,拿到的是jq对象
$('li')[0] // 通过索引取值找到标签,拿到的是原生DOM对象
$('li')[ 索引 ] // 通过中括号索引取值获取的是原生dom对象，而用eq(索引值)获取的是jQuery对象
class类值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
color: tan;
}
.c4{
color:yellow!important;
}
span{
color:blue;
}
/*
优先级:
继承 权重 0
div标签选择器 权重 1
id选择器 权重 100
内联样式优先级 权重1000
!important 最高
相同优先级的,后面的覆盖前面的
谁的权重大谁的优先级就高
*/
.c1{ /* 10 */
height:100px;
width:100px;
background-color:red;
}
.c2{
height:100px;
width:100px;
background-color:green;
}
.c3{
color:red;
}
</style>
</head>
<body>
<div class="c1">
康玉康和张保张
秀!!!
</div>
<div class="c3">
div1
<span class="c4" id="d1" style="color:purple;">xxx</span>
</div>
</body>
<script src="jquery.js"></script>
<script>
$('.c1').addClass('c2'); // 动态添加类值
$('.c1').removeClass('c2'); // 删除类值
$('.c1').toggleClass('c2'); // 有就删除,没有就添加
// 某些网站的闪烁效果
setInterval(function(){$('.c1').toggleClass('c2');},100);
</script>
</html>
值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--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>
</body>
<script src="jquery.js"></script>
<script>
//示例: 简单验证用户输入内容长度的判断
$('#username').blur(function(){
var uname = $('#username').val();
if (uname.length < 4){
alert('太短了,不舒服');
}
})
// 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']);
表单对象属性选择器补充
/* 表单对象属性选择器 */
:checked // 找到被选中的input标签和option标签
:selected // 找被选中的select标签中的option标签
:disabled // 不可操作的标签
:enabled // 可操作的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="s1" disabled>
<input type="text">
<input type="password">
</body>
<script src="jquery.js"></script>
<script>
$(":enabled"); // 找到可操作的标签
$(":disabled"); // 找到不可操作的标签
</script>
</html>
<!-- 在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下拉框中-->
创建标签
var a = document.createElement('a'); // 创建一个a标签的dom对象
// 使用jQuery创建a标签对象，并且为a标签对象添加属性和值
$('<a>',{
text:'这还是个链接',
href:'http://www.baidu.com',
class:'link',
id:'baidu',
name:'baidu'
})
文档操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>亚洲</h1>
</div>
</body>
<script src="jquery.js"></script>
<script>
// 往标签内部的后面添加元素
// 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'));
</script>
</html>
清空和删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>xxxx</h1>
</div>
<div id="d2">
<h2>ssss</h2>
</div>
</body>
<script src="jquery.js"></script>
<script>
$('#d1').remove(); // 删除
$('#d1').empty(); // 清空 类似:$('#d1').text('');
</script>
</html>
事件冒泡
什么是事件冒泡？当父级或者祖先辈标签和子标签绑定了相同的事件时，比如点击事件，那么当点击子标签时，会一层层触发父级标签的点击事件
<!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>
绑定事件的两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1"></div>
</body>
<script src="jquery.js"></script>
<script>
// 绑定事件的两种方式
$('.c1').click(function(){
});
$('.c1').on('click',function(){
})
</script>
</html>
克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="c1">弹弹弹</button>
</body>
<script src="jquery.js"></script>
<script>
// js代码
$('.c1').click(function (){
// var btn = $(this).clone(); // 不克隆绑定的事件
// 通俗说：就是点击第一个按钮可以克隆，点击克隆生成的按钮不可以克隆
var btn = $(this).clone(true); //克隆连带事件
$('.c1').append(btn);
// 通俗说：无论点击哪个按钮，都可以克隆。因为克隆的按钮也连带克隆事件
})
事件委托
什么是事件委托？事件委托是通过事件冒泡的原理，利用父级去触发子级的事件
// 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);
})
属性操作
prop方法
针对的是checked,selected,enabled,disabled
$('#sex').prop('checked',true); //设置选中
$('#sex').prop('checked',false); // 取消选中
$('#sex').prop('checked'); // 查看当前状态是否为选中状态,选中为true，未选中为false
$('#uname').prop('disabled',true); //设置不可编辑
$('#uname').prop('disabled',false); //设置可以编辑
attr方法:获取值,修改值
$('#d1').attr('id') // 获取属性对应的值
$('#d1').attr({'class':'c1','name':'mike'}); // 设置属性
常用事件
<!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>
页面载入
// 页面加载事件，等页面上所有的标签和一些静态文件(图片、视频、外部js文件，外部css文件等等)全部加载完才自动触发的事件
window.onload = function (){
$('#d1').click(function (){
$('#d1').css({'background-color':'green'}) ;
})
}
// window.onload 存在覆盖现象，后设置的会把前面设置的覆盖掉
// jquery的页面载入,等html文件中的代码加载完成之后触发,不存在覆盖现象
$(document).ready(function (){
$('#d1').click(function (){
$('#d1').css({'background-color':'green'}) ;
});
})
4658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
