jquery
一、jquery初识
在bootcdn找到jquery压缩文件:https://www.bootcdn.cn/
引入jquery:
将压缩文件的内容复制到一个空js文件中,再导入到html文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="d1">12345</h1>
</body>
<script src="jquery.js"></script>
<script>
</script>
</html>
var d1=$(’#d1’) --jquery对象
var d=document.getElementById(‘d1’) --原生dom对象
jquery对象和dom对象不能调用互相的方法
jquery对象和dom对象可以互相转换
d1[0] — dom对象
$(d) —jquery对象
二、选择器
1、id选择器
写法:$(’#d1’)
如图,可根据id取出找到对应标签,同css
2、类选择器
写法:$(’.c1’)
如图,可根据类找到对应标签,同css
3、元素选择器
写法:$(‘标签名称’)
如图,可通过元素名称找到所有对应标签
4、组合选择器
写法:$(’#d1,.c2’)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1,.c2{
background-color:red;
height:100px;
width:100px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="d1"></div>
<div class="c2">
我是c2
</div>
</body>
<script src="jquery.js"></script>
<script>
</script>
</html>
页面效果:
可通过组合选择器更换标签css样式:
$(#d1,.c2).css('background','blue');
取出索引为0的dom对象和索引为0的jquery对象:
$('#d1,.c2')[0] //索引为0的dom对象
$('#d1,.c2').eq(1) //索引为0的jquery对象
示例:
5、后代选择器
$('.c2 span')
示例:
6、表单选择器
$(":input") 找到所有input标签
示例:
$(":text") 找到所有input且type=“text"的标签
示例:
$(”:password") 找到所有input且type=“password"的标签
示例:
$(”:radio") 找到所有input且type=“radio”的标签
$(“checkbox”) 找到所有input且type="checkbox"的标签
7、筛选器方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="c1">张三</li>
<li class="c1">李四</li>
<li class="c2">王五</li>
<li class="c3">赵六</li>
</ul>
</body>
<script src="jquery.js"></script>
</html>
1)parent()
找寻子标签的父标签
2)parents()
找寻子标签的所有父级标签
3)parentsUntil(‘父级标签’)
往上找,直到找到括号内的父级标签,不包含此父级标签
4)children()
找寻所有子标签:
5)children(“类”)
找到符合类选择器的子标签
6)next()
找寻下面一个兄弟标签
7)nextAll()
找寻下面所有兄弟标签
8)nextUntil(“兄弟标签”)
直到某个兄弟标签为止,不包含此兄弟标签
9)prev()
向上寻找兄弟标签
10)prevAll和prevUntil
参考nextAll与nextUntil,不过顺序是反的
11)siblings()
找到不包含自己的所有兄弟标签
筛选兄弟标签中class为c2的兄弟标签:
12)find()
找后代,同css后代选择器
$('li').find('span');
13)first()和last()和eq(索引值)
$('li').first(); //找寻li标签中第一个
$('li').last(); //找寻li标签中最后一个
$('li').eq("0"); //按照索引取对应标签,索引从0开始
$('li')[0]; //dom原生对象
三、文件操作
text()和html() 等同于innerText和innerHTML
获取文本:
$('.c1').text();
$('.c1').html();
设置文本:
$('.c1').text('要设置文本');
$('.c1').html('<a href="">'文本'</a>') //html可更改标签,text不行
四、class类值操作
1、添加类值
$('.c1').addClass('c2')
2、删除类值
$('.c1').removeClass('c2')
3、切换,有就删除,没有就添加
$('.c1').toggleClass('c2');
五、css样式操作
$('.c1').css('样式');
六、值操作
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="username" value="username" disabled>
<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>
<option value="4">天水</option>
</select>
<select name="food" id="s2" multiple>
<option value="1">烤鸭、羊蝎子</option>
<option value="2">蟹黄包、白斩鸡</option>
<option value="3">西湖醋鱼、龙井虾仁</option>
<option value="4">天水酒碟、虾酱肉</option>
</select>
</body>
<script src="jquery.js"></script>
</html>
1)text获取值
$(:'text').val()
2)text设置值
$(':text').val('user');
3)redio获取值
先选中要获取值的选项,再进行获取:
$(':radio:checked').val();
4)radio设置值
$('radio').val(['2']);
根据默认值,通过设置值单选框会自动切换
5)checkbox
checkbox获取值:
var s $(':checkbox:checked');
//循环取出
先选中多选框要取值的元素
补充:$.each循环
循环标签数组:
checkbox设置值:
可根据默认值进行设置:
$(':checkbox').val(['值1','值2'])
用类或id设置标签:
单选下拉框和多选下拉框查看及设置:
可通过类或id来设置:
jquery选择器补充:
表单对象属性选择器
:checked //找到被选中的input标签和option标签
:selected //找到被选中的select标签中的option标签
:disabled //不可操作标签
:enabled //可操作标签
七、创建标签
js创建标签方法:
var a=document.createElement('a');
jquery创建标签方法:
$({'<a>',{
text:'链接',
href:'www.baidu.com',
class:'link',
name:'baidu',
id:'d1'
})
八、文档操作
1、往标签内部的后面添加元素
append方法:
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div></div>
</body>
</html>
2、append添加标签:
var a = $(<a>,"{href:"www.baidu.com",text:"百度"}"
$('div').append(a)
3、prepend方法:
往标签内部的前面添加元素
4、insertBefore方法:
往标签外部前面添加元素
5、insertAfter:
往标签外部后面添加元素:
九、清空及删除标签
清空标签三种方法:
$('div').text('');
$('div').html('');
$('div').empty();
删除标签:
$('div').remove();
十、克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<button class="btn">屠龙宝刀,点击就送</button>
</div>
</body>
<script src="jquery.js" class="btn"></script>
<script>
$('.btn').click(function(){
// var btn=$(this).clone(); //不克隆绑定的事件
var btn=$(this).clone(true); //克隆绑定的事件
$('.c1').append(btn);
})
</script>
</html>
页面效果:
可通过点击按钮克隆按钮
十一、模版字符串
var name='Lsir'
var ss='${name},你好'
十二、事件绑定
方式1
点击事件
$('#btn').click(function (){
$('.shadow,.mode').removeClass('hide');
})
方式2
$('.c1').on('click',function (){
$(this).addClass('c2');
})
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 100px;
width: 100px;
}
.c2{
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
<script src='jquery.js'></script>
<script>
// xx.onclick = function(){
// this
// }
// //方式1
// $('.c1').click(function (){
// // this//dom对象
// $(this).addClass('c2');
//
// }) ;
// 方式2
$('.c1').on('click',function (){
$(this).addClass('c2');
})
</script>
</html>
页面效果:
点击后变色:
十三、事件委托
绑定子标签时,必须通过父标签来进行事件委托:
<div class="c1">
<button class="btn">屠龙宝刀,点击就送!</button>
</div>
js代码部分
$('.c1').on('click','.btn',function (){
var btn = $(this).clone();
$('.c1').append(btn);
})
十四、属性操作
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({'xx1':'oo1','xx2':'oo2'}); // 设置属性
十五、常用事件
1)失去光标时触发的事件
blur(function (){})
2)获取光标时触发的事件
focus(function (){})
3)change事件,域内容发生变化时触发的事件 ,如果是给input标签绑定的change事件,那么只有input标签中的内容发生变化,并且失去光标时才会触发
change(function (){})
4)鼠标进入时触发的事件
mouseenter(function (){})
5)鼠标离开时触发的事件
mouseleave(function (){})
6)鼠标悬浮事件
hover(function (){})
7)实时捕获输入内容的事件
input(function (){})
示例:
<!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="c1">-->
<!--</div>-->
<div class="c2"></div>
</body>
<script src='jquery.js'></script>
<script>
// 失去光标时触发的事件
// $('#username').blur(function (){
// $(this).css({'background-color':'yellow'});
// });
// // 获取光标时触发的事件
// $('#username').focus(function (){
// $(this).css({'background-color':'blue'});
// });
//change事件,域内容发生变化时触发的事件 ,如果是给input标签绑定的change事件,
// 那么只有input标签中的内容发生变化,并且失去光标时才会触发
// $('#username').change(function (){
// console.log($(this).val());
// });
// 鼠标进入时触发的事件
// $('.c1').mouseenter(function (){
// $(this).css({'background-color':'red'})
// })
// // 鼠标离开时触发的事件
// $('.c1').mouseleave(function (){
// $(this).css({'background-color':'yellow'})
// })
// // 鼠标悬浮事件
// $('.c1').hover(
// // 鼠标进入时触发事件
// function (){
// $(this).css({'background-color':'red'})
// },
// // 鼠标离开时触发事件
// function (){
// $(this).css({'background-color':'yellow'})
// }
// ) ;
// input事件:实时捕获输入内容的事件
// $('#username').on('input',function (){
// console.log($(this).val());
// })
</script>
</html>