jQuery
页面载入
引入: <script src = 'jquery.js'> </script>
-
jquery文件要在使用jquery的代码之前引入
-
js代码最好都放到body标签下面或者里面的最下面来写
$(document).ready(function(){
// 在这里写你的JS代码...
})
// 简写
$(function(){
// 你在这里写你的代码
})
jQuery对象和dom对象
- jQuery找到的对象称为 --> jQuery对象，伪数组
- 原生js找到的标签称为 --> dom对象
- dom对象只能使用dom对象的方法,不能使用jquery对象的方法,jquery对象也是,它不能使用dom对象的方法
- dom对象和jquery对象互相转换:
- jquery对象转dom对象 -- jquery对象[0] 示例: $('#d1')[0]
- dom对象转jquery对象 -- $(dom对象)
jQuery选择器
选择器
不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器
1. id选择器
- $("#id值")
2. 标签选择器
- $("标签名")
3. class选择器
- $(".类名")
4. 交集选择
- $("div.c1") 找到有c1 class类的div 标签
5. 组合选择器
- $("#id, .className, tagName")
6. 层级选择器
- x和y可以为任意选择器
- $("x y"); x的所有后代y（子孙）
- $("x > y"); x的所有儿子y（儿子）
- $("x + y"); 找到所有紧挨在x后面的y(一个)
- $("x ~ y"); x之后所有的兄弟y
7. 属性选择器
- $("input[type='checkbox']"); // 取到checkbox类型的input标签
- $("input[type!='text']"); // 取到类型不是text的input标签
选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象
过滤选择器
:first // 第一个 示例:$('li:first')
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(选择器) // 排除所有满足not条件的标签
:has(选择器) // --$('li:has(.c1)') 找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签
过滤方法
-
前后
$('#l3').next(); 找到下一个兄弟标签 $('#l3').nextAll(); 找到下面所有的兄弟标签 $('#l3').nextUntil('#l5'); 直到找到id为l5的标签就结束查找，不包含它 $("#id").prev() 找到上一个兄弟标签 $("#id").prevAll() 找到上面所有的兄弟标签 $("#id").prevUntil("#i2") 直到找到id为i2的标签就结束查找，不包含它 -
父亲元素
$("#id").parent() // 查找一级父类 $("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到） $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止， 这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。 -
子代、后代
$('ul').children(); // 找所有的儿子们标签 $('ul').children('#l3'); // 找到符合后面这个选择器的儿子标签 $("div").find("p") //后代 -
兄弟
$('#l5').siblings(); // 找到所有的兄弟们标签,不包含自己 $('#l5').siblings('#l3'); // 找到符合后面这个选择器的兄弟标签 -
过滤方法
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同， find是从div标签的子子孙孙中找到一个符合条件的标签 等价于 $("div.c1")--> 找到类值等于c1的div标签 -
其他
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素$('li').not('#l3'); .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
类操作
-
addClass(); 添加指定的css类名
-
removeClass(); 移除指定的css类名
-
hasClass(); 判断样式是否存在
-
toggleClass(); 切换css类名,有就移除没有就添加
$('.c1').addClass('c2'); $('.c1').removeClass('c2'); $('.c1').hasClass('c2'); $('.c1').toggleClass('c2');
样式操作
-
原生js: 标签.style.color = 'red';
-
单个样式
$('.c1').css('background-color','red') -
同时设置多个css样式:
$('.c1').css({'background-color':'red','width':'200px'})
文本和值操作
-
html() 取得第一个匹配元素的html内容，包含标签内容
-
html(val) 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
-
text() 取得所有匹配元素的内容，只有文本内容，没有标签
-
text(val) 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
$('.c1').html('<h1>你好</h1>'); // 将你好插入文本中 $('.c1').text('<h1>你好</h1>'); // 无法识别标签,所以将标签作为文本插入进去
对于有value属性的表单标签获取值
/*获取值*/
input type='text'的标签--$('#username').val();
input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,只会拿到一个值,需要循环取
select单选 --- $('#city').val(); 拿到value设置的值
select多选 --- $('#author').val(); // ["2", "3"]
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
/*设置值*/
input type='text'的标签 --- $('#username').val('yhp');
input type='radio'标签 --- $('[name="sex"]').val(['3']);
如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
单选select --- $('#city').val('1'); option value='1'
多选select --- $('#author').val(['2','3'])
属性操作
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr(attrName)// 从每一个匹配的元素中删除一个属性
prop -- 针对的是checked\selected\disabled..
查看标签是否有checked属性,也就是是否被选中
attr $(':checked').attr('checked'); //checked --没被选中: undefined
prop $(':checked').prop('checked'); //true -- 没被选中 : false
通过设置属性的方式来设置是否选中:
$(':radio').eq(2).prop('checked',true); true和false不能加引号
$(':radio').eq(2).prop('checked',false);
简单总结:
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
DOM操作
添加到指定元素内部的后面
$(A).append(B) // 把B追加到A
$(B).appendTo(A) // 把B追加到A
// 添加字符串照样能识别标签 *****
$('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
$(A).prepend(B) // 把B前置到A
$(B).prependTo(A) // 把B前置到A
示例
$('a').prependTo($('div'));
添加到指定元素外部的后面
$(A).after(B) // 把B放到A的后面
$(B).insertAfter(A) // 把B放到A的后面
添加到指定元素外部的前面
$(A).before(B) // 把B放到A的前面
$(B).insertBefore(A) // 把B放到A的前面
移除和清空元素
remove() // 从DOM中删除所有匹配的元素,包括自己也删除
empty() // 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在
$('div').remove(); // 清空包括div自己的数据
$('div').empty(); // 清空div标签里面的数据
替换
replaceWith()
replaceAll()
示例:
var a = document.createElement('a')
a.href = 'http://www.baidu.com';
a.innerText = 'xxx';
$('span').replaceWith(a); // 用a标签替换span标签
$(a).replaceAll('span'); // 用a标签替换span标签
clone()克隆
<button class="btn">屠龙宝刀,点击就送!</button>
$('.btn').click(function () {
// var a = $(this).clone(); // 克隆标签
var a = $(this).clone(true); // 括号内加一个true,连带事件一起克隆
$(this).after(a);
})
事件
事件绑定方式
<script>
//原生js绑定点击事件:
$('.c1')[0].onclick = function(){
this.style.background = 'red';
}
// 方式一
$('.c1').click(function () {
$(this).css({'background-color':'purple'})
})
// 方式二
$('.c1').on('click',function () {
$(this).css({'background-color':'purple'})
})
</script>
常用事件
//获取光标触发的事件
$('[type="text"]').focus(function () {
$('.c1').css({'background-color':'black'});
});
//失去光标(焦点)触发的事件
$('[type="text"]').blur(function () {
$('.c1').css({'background-color':'purple'});
});
//域内容发生改变时触发的事件
$('select').change(function () {
$('.c1').toggleClass('active');
});
// 鼠标悬浮触发的事件
$('.c1').hover(
//第一步:鼠标放上去
function () {
$(this).css({'background-color':'blue'});
},
//第二步,鼠标移走
function () {
$(this).css({'background-color':'yellow'});
}
)
动画
// 基本
show([s,[e],[fn]]) $('.c1').show() //show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果，（搞个img图片看看效果），后面两个参数先不用管
hide([s,[e],[fn]]) $('.c1').hide()
toggle([s],[e],[fn])//这几个toggle的意思就是你原来是什么效果，我就反着来
// 滑动（拉窗帘一样）
slideDown([s],[e],[fn])
//使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；意思就是5秒内把你的高度变为0
//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]]) o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
each循环
// 循环标签对象数组
$('li').each(function(k,v){
console.log(k,v);
});
循环普通数组
var d1 = ['aa','bb','cc'];
$.each(d1,function(k,v){
console.log(k,v);
})
// 0 "aa"
// 1 "bb"
// 2 "cc"
跳出循环 return false; 类似于break
$('li').each(function(k,v){
console.log(k,v.innerText);
if (k === 1){
return false;
}
});
跳出本次循环 return; 类似于continue
$('li').each(function(k,v){
if (k === 1){
return;
}
console.log(k,v.innerText);
});
data
给标签对象添加数据,类似于添加了全局变量
.data(key, value): 设置值
.data(key) 取值
.removeData(key) 删除值
