- JavaScript库
封装了函数或者方法的一种“集合”
其中的jQuery快速操作DOM
文章目录
一、jQuery
优点
二、jQuery的基本使用
1.jQuery的入口函数
<script>
/ 1. $('div').hide();这样写div盒子还存在
/ 2. $(document).ready(function(){
/ $('div').hide();
/ }) js写在前还正常执行的第一种写法
/ 3. $(function(){
$('div').hide();
}) js写在前还正常执行的推荐写法
</script>
<div></div>
2.jQuery的顶级对象$
1.是jQuery的别称
2.是jQuery的顶级对象,相当于原生js的windows
3.jQuery对象和DOM对象
1.原生js获取过来的是DOM对象
2.jQuery获取过来的是jQuery对象,还顺带包装成伪数组的形式
3.DOM和jQuery各自有自己的方法和属性,不能混用,会报错的
三、jQuery常用API
1.jQuery选择器
- 普通选择器
写法和document.querySelector('')类似
$('');
层级选择器的写法:$('ul li');/$('ul>li');
隐式迭代:遍历内部DOM元素(jQuery获取后返回的是一个伪数组),对每个对象
执行相应操作
- 筛选选择器
<ul>
<li>34567</li>
<li>5364785</li>
<li>5364785</li>
<li>5364785</li>
<li>5364785</li>
</ul>
<script>
$(function() {
$('ul li:first').css('color','yellow');选择第一个
$('ul li:last').css('color','red');选择第二个
$('ul li:eq(2)').css('color','skyblue');选择索引号为2的(索引号从0开始)
$('ul li:odd').css('color','skyblue');选择索引号为奇数
$('ul li:even').css('color','red');选择索引号为偶数
})
</script>
- 筛选方法
<div class="father">
<div class="son"></div>
</div>
$(function() {
$('.son').parent().css('color','red');
})
- 排他思想
<button>123</button>
<button>123</button>
<button>123</button>
<button>123</button>
<button>123</button>
<button>123</button>
<script>
$(function(){
$('button').click(function(){
$(this).css('color','red');
console.log($(this).index());/获取被点击的按钮的索引号
$(this).siblings('button').css('color','');/其他兄弟元素不变
//链式编程的写法实现上面功能
/$(this).css('color','red').siblings().css('color','');
})
})
</script>
2.jQuery样式操作
- 操作css方法
- 设置类样式方法
切换类——没有则加上,有则去掉
- 类操作与className区别
原生js的className会覆盖原来的
但jQuery的类操作不会,它是追加类或者是删除指定的类
3.jQuery效果
hover()表示鼠标经过和离开两者都有
//鼠标经过展示:
$('.mi>li').hover(function() {
$(this).children('ul').slideDown(2000);
},function() {
$(this).children('ul').slideUp(10);
})
//这样简化了上面的代码
$('.mi>li').hover(function() {
$(this).children('ul').stop().toggle();/把stop写
在前面,停止上一次动画
})
自定义动画animate,添加的是对象
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left:200,
top:300,
opacity:.3,
},1000)
})
})
</script>
<button>one</button>
<div></div>
mouseenter() 会在鼠标时经过触发
4.jQuery属性操作
- prop()获取自带属性并且可以改变属性值
- attr()获取自定义属性并且可以改变属性值
<a href="http://www.baidu.com">zheli</a>
<input type="checkbox" checked="checked">
<script>
$(function() {
console.log($("a").prop("href"));
$("a").prop("title","good");
$("input").change(function() {
console.log($(this).prop("checked"));/值是布尔类型的
})
})
</script>
- data() 获取属性值
1.h5的自定义属性写法时data直接获取
2.对自定义属性赋值时值是存储在缓存中,刷新了就没了,而且元素控制台还看不到
<input type="checkbox" name="" id="iput">
<script>
$(function() {
$("#iput").data("name","andy");
console.log($("#iput").data("name"));
})
</script>
控制台展示如下
change()方法获取元素状态是否变化
5.内容文本值
1.html() 相当于原生js的innerHTML(),获取元素内容(识别标签)
html() 获取值
html("...") 改变值
2.text() 相当于原生js的innerText(),获取元素文本内容(不识别标签)
text() 获取值
text("...") 改变值
3.val()相当于原生js的value(),获取表单值
val() 获取值
val("...") 改变值
6.元素操作
- 遍历元素——给同一类元素做不同操作
<div>1</div>
<div>2</div>
<div>3</div>
<input type="text">
<script>
var attr = ["red","green","skyblue"];
var sum = 0;
$(function() {
$("div").each(function(index,elem) {
console.log(index);
$(this).css("color",attr[index]);
sum += parseInt($(elem).text());
})
$("input").val(sum);
})
</script>
- 创建、添加、删除元素
<script>
var li = $("<li>555</li>"); //创建元素
var div = $("<p>100</p>");
$(function() {
/ $("ul").append(li);/添加子元素在最后面
/ $("ul").prepend(li);/添加子元素在最前面
/ $("div").before(div);/添加兄弟元素在前面
/ $("div").after(div);/添加兄弟元素在后面
/ $("ul").remove();/移除ul
/ $("ul").empty();/清空ul,只留下ul标签
/ $("ul").html("");/清空ul,只留下ul标签
})
</script>
<ul>
<li>233</li>
</ul>
<div>hao out are you</div>
7.尺寸、位置操作
可于jQuery文档搜索尺寸、位置
8、其他
节流阀/互斥锁的思维解决两事件相互触发的情景
var flag = true;
四、jQuery事件
1、常见事件
1.单个事件注册
$("").事件(function() {
})
2.事件处理
(1)on绑定一个或者多个事件
$("div").on({
click : function() {
$(this).css("backgroundColor","skyblue");
},
mouseover : function() {
$(this).css("backgroundColor","red")
}
})
如果事件处理程序相同,可以这样写
$("div").on("mouseenter mouseover",function() {
$(this).toggle();
})
(2)可以委派事件给父元素,给父元素绑定事件,但触发事件的是子元素
<ul>
<li>233</li>
<li>22</li>
<li>33</li>
</ul>
<script>
$("ul").on("click","li",function() {
alert('hi');
})
</script>
(3)给动态创建的元素也可以添加事件
<script>
$(function() {
$("ul").on("click","li",function() {
alert('hi');
})
var li = $('<li>jij</li>');
$("ul").append(li);
})
</script>
<ul>
<li>hao</li>
<li>en</li>
</ul>
3.off() 方法移除用.on()绑定的事件处理程序,可以有回调函数
$("").off() 解绑所有事件
$("").off("click") 解绑对应事件
$("ul").off("click","li") 解绑事件委托
4.one() 绑定一次性事件,语法和 on()一样
5.自动触发事件
/自动触发点击事件
(1)$("div").click();
(2)$("div").trigger("click");
(3)$("div").triggerHandler("click");//但不会触发默认行为
2.事件对象
五、jQuery其他方法
1.jQuery对象拷贝
2.多库共存
3.jQuery插件
就是找想要的效果,然后参照源代码复制、粘贴、修改