目录
1.jQuery初识
2.选择器
3.文本操作
4.class类值操作
5.css样式操作
6.值操作
7.注意点：button按钮提交form表单数据
8.jquery选择器补充
9.模态对话框示例
10.创建标签
11.文档操作
12.清空标签
13.删除标签
14.克隆
15.模板字符串
16.事件绑定
17.事件冒泡
18.事件委托
19.属性操作
20.逻辑运算符
21.jQuery中简单动画效果
22.常用事件
23.页面载入
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 后代选择器
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); // 取消选中
$('#sex').prop('checked'); // 查看当前状态是否为选中状态,选中为true，未选中为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>
23.页面载入
// 页面加载事件，等页面上所有的标签和一些静态文件(图片、视频、外部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'}) ;
});
})
