JQuery
1. 获取对象元素
- 1 通过js获取HTML中标签的元素对象
js：var divs = document.getElementsByTagName(“div”);
1.2 通过jq获取HTML中标签的元素对象
jquery: var $divs = $(“div”);
<script type="text/javascript">
var divs = document.getElementsByTagName("div");
alert(divs.length);
for(var i=0;i<divs.length;i++){
}
var $divs = $("div");
alert($divs.length);
$divs.html("bbb");
</script>
1.3 js和jq之间的相互转化
js——>jq ：$(js对象)
<script type="text/javascript">
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
$(divs[i]).html("ccc");
}
</script>
jq----->js:
var $divs = $("div");
$divs[0].innerHTML = "dddd";
$divs.get(1).innerHTML = "eeee";
2. 分类
2.1 基本选择器
标签选择器
? 语法：$(“html标签名”) 获得所有匹配标签名的元素
id选择器
? 语法：$("#id属性值") 获得与指定id属性值匹配的元素
类选择器
? 语法：$(".class属性值") 获得与制定class属性值匹配的元素
并集选择器
如果要修改多个元素的属性，可以用逗号(,)分割
$(".nav-left div,div").css("backgroundcolor","red");
2.2 层级选择器
后代选择器
? 语法：$(“A B”) 选择A元素内部的所有B元素
子选择器
? 语法：$(“A< B”) 选择A元素内部的所有B子元素
2.3 属性选择器
属性名称选择器
? 语法：$(“A[属性名]”) 包含制定属性的选择器
属性选择器
? 语法：$(“A[属性名=‘值’]”) 包含制定属性等于指定值的选择器
复合属性选择器
? 语法：$(“A[属性名=‘值’] []…”) 包含制定属性的选择器
2.4 过滤选择器
首元素选择器
? 语法：first 获得选择的元素的第一个元素
尾元素选择器
? 语法：last 获得选择的元素中的最后一个元素
非元素选择器
? 语法：not 不包活指定内容的元素
偶数选择器
? 语法 even 偶数，从0开始计数
奇数选择器
? 语法 odd 奇数，从0开始计数
等于索引选择器
? 语法 eq(index) 指定索引元素
大于索引选择器
? 语法 gt(index) 大于指定索引元素
小于索引选择器
? 语法 lt(index) 小于指定索引元素
标题选择器
? 语法 header 获得标题元素，固定写法
$("tr:get(1):odd").css("background","pink")
2.5 表单过滤选择器
可用元素选择器
? 语法 enabled 获得可用元素
不可用元素选择器
? 语法 disabled 获得不可用元素
选中选择器
? 语法 checked 获得单选/复选框中的元素
3. 入口函数
$(function(){
$("#b1").click(function(){
alert("abc");
});
});
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<button id="b1">dianji</button>
</body>
});
});
<script type="text/javascript">
$(function(){
console.log(1)
$(".nav-left div").click(function(){
$(".nav-left div").removeClass("blu")
$(this).addClass("blu")
})
})
</script>
4. DOM操作
内容操作
- html():获取/设置元素的标签体内容
- text():获取/设置元素的标签体纯文本内容
- val():获取/设置之元素的value属性值
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-2.1.4.min.js.js"></script>
<script>
$(function(){
var value = $("#myinput").val();
console.log(value)
$("#myinput").val("李四");
var html1 = $("#mydiv").html();
console.log(html1)
$("#mydiv").html("aaa");
var text1 = $("#mydiv").text();
console.log(text1)
$("#mydiv").text("bbb");
})
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="张三" /><br />
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
属性操作
- 通用属性操作
-
attr():获取/设置元素的属性 -
removeAttr():删除属性 -
prop():获取/设置元素的属性 -
removeProp():删除属性 $(".nav-left div").removeClass("blu") 和$(".nav-left div").removeAttr("class")效果一样
$(this).addClass("blu")和$(this).attr("class","blu")效果一样
2.对class属性操作 -
addClass():添加class属性值 -
removeCLass():删除class属性值 -
toggleClass():切换class属性 如果元素对象上存在class=“one”,则将属性值one删除掉。如果元素对象上不存在class=“one”,则添加
CRUD操作
- append():父元素将子元素追加到末尾
对象1.append(对象2):将对象2添加到对象1元素内部，并且在末尾
- prepend():父元素将子元素追加到开头
对象1.append(对象2):将对象2添加到对象1元素内部，并且在开头
- appendTo():
对象1.append(对象2):将对象1添加到对象2元素内部，并且在末尾
- prependTo():
对象1.append(对象2):将对象1添加到对象2元素内部，并且在开头
- **after()😗*添加元素到对应元素后边
对象1.after(对象2):将对象2添加到对象1后边，对象1和对象2是兄弟关系
- **before()😗*添加元素到元素前边
对象1.after(对象2):将对象2添加到对象1前边，对象1和对象2是兄弟关系
- remove():将对象删除
- empty():清空元素的所有后代元素
- clone():将一个对象进行复制
jQuery高级
1.动画
三种显示和隐藏元素
1.1默认显示和隐藏方式
show([speed,[easing],[fn]]) 显示
hide([speed,[easing],[fn]]) 隐藏
toggle([speed],[easing],[fn]) 切换
<script type="text/javascript">
function showAni(){
$(".animation").show("slow","swing",2);
}
function hideAni(){
$(".animation").hide("slow","swing",1);
}
function toggleAni(){
$(".animation").toggle("slow");
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showAni()"/>
<input type="button" value="隐藏" onclick="hideAni()"/>
<input type="button" value="切换" onclick="toggleAni()"/>
<div class="animation"></div>
<style>
.animation{
width: 300px;
height: 300px;
background-color: #00FF00;
}
</style>
1.2滑动显示和隐藏方式
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
<script type="text/javascript">
function showAni(){
$(".animation").slideDown("slow","swing",2);
}
function hideAni(){
$(".animation").slideUp("slow","swing",1);
}
function toggleAni(){
$(".animation").slideToggle("slow");
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showAni()"/>
<input type="button" value="隐藏" onclick="hideAni()"/>
<input type="button" value="切换" onclick="toggleAni()"/>
<div class="animation"></div>
<style>
.animation{
width: 300px;
height: 300px;
background-color: #00FF00;
}
</style>
</body>
1.3淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function showAni(){
$(".animation").fadeIn(500,"swing");
}
function hideAni(){
$(".animation").fadeOut(500,"swing");
}
function toggleAni(){
$(".animation").fadeToggle("slow");
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showAni()"/>
<input type="button" value="隐藏" onclick="hideAni()"/>
<input type="button" value="切换" onclick="toggleAni()"/>
<div class="animation"></div>
<style>
.animation{
width: 300px;
height: 300px;
background-color: #00FF00;
}
</style>
</body>
speed:动画的速度 三个预定义的值slow,normal,fast或者表示动画时长的毫秒值如：1000
easing：用来指定切换效果，默认是"swing",可用参数"linear" swing:动画执行时效果是先慢，中间块，最后又慢 linear：动画执行时速度是均速的
fn：在动画完成时执行的函数，每个元素执行一次
2.遍历
js对象.each(callback) callback回调函数 function()
$.each()
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var citys = $("#city li");
citys.each(function(index,element){
if("上海"==$(element).html()){
return false;
}
})
})
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>南京</li>
<li>西安</li>
<li>深圳</li>
</ul>
</body>
for…of
for(li of citys){
alert($(li).html())
}
3.事件绑定
- jQuery的标准绑定方式
jq对象.事件方法(回调函数) 如click
- on绑定事件/off解除绑定事件
jq对象.on(“事件名称”,回调函数)
jq对象.off(“事件名称”)
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#btn1").on("click",function(){
alert("我绑定了")
});
$("#btn2").click(function(){
$("#btn1").off("click");
$("#btn1").off();
})
});
</script>
</head>
<body>
<input type="button" value="使用on绑定事件" id="btn1"/>
<input type="button" value="使用off解除绑定" id="btn2"/>
</body>
- toggle切换事件
jq对象.toggle(fn1,fn2,…)
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#btn").toggle(function(){
$(".bg").css("backgroundColor","#FF0000");
},function(){
$(".bg").css("backgroundColor","#00FF00");
});
});
</script>
<style>
.bg{
width: 300px;
height: 300px;
background-color: aliceblue;
}
</style>
</head>
<body>
<input type="button" value="切换背景颜色" id="btn" />
<div class="bg"></div>
</body>
鼠标绑定事件
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(".pic img").mouseover(function(){
console.log("哇塞，美女")
}).mouseout(function(){
console.log("美女走了")
})
})
</script>
<style>
.pic img{
height: 600px;
width: 400px;
}
</style>
</head>
<body>
<div class="pic">
<img src="img/1.jpg"/>
</div>
</body>
4.案例
1.广告的显示与隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
setTimeout(adshow,3000);
setTimeout(adhide,8000);
});
function adshow(){
$("#ad").show("slow");
}
function adhide(){
$("#ad").hide("slow");
}
</script>
<style>
#content{
height: 300px;
width: 100%;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="ad" style="display:none;">
<img src="img/b1.jpg" height="200px" width="100%"/>
</div>
<div id="content">
正文内容
</div>
</body>
</html>
2.抽奖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var imgs = ["img/b2.jpg","img/b1.jpg","img/b3.jpg","img/b4.jpg","img/b5.jpeg","img/b6.png","img/b7.jpg","img/b8.jpg"];
$(function(){
$("#startId").prop("disabled",false);
$("#endId").prop("disabled",true);
var id;
var Index;
$("#startId").click(function(){
$("#startId").prop("disabled",true);
$("#endId").prop("disabled",false);
id = setInterval(function(){
Index = Math.floor(Math.random()*7);
$("#img1").prop("src",imgs[Index]);
},20);
});
$("#endId").click(function(){
$("#startId").prop("disabled",false);
$("#endId").prop("disabled",true);
clearInterval(id);
$("#img2").prop("src",imgs[Index]).hide();
$("#img2").show(1000);
})
});
</script>
</head>
<body>
<div style="border-style: dotted;width: 200px;height: 150px;">
<img src="img/b2.jpg" id="img1" style="width: 200px; height: 150px;"/>
</div>
<div style="border-style: double ;width: 800px; height: 500px;position: absolute;left: 500px;top: 10px;">
<img src="img/b2.jpg" id="img2" width="800px" height="500px"/>
</div>
<input type="button" id="startId" value="点击开始" style="width: 150px; height: 150px;font-size: 22px;" />
<input type="button" id="endId" value="点击结束" style="width: 150px; height: 150px;font-size: 22px;" />
</body>
</html>
5.插件
增强jQuery的功能
计时器
1.**setTimeout() **是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCevkMyi-1634911767624)(C:\Users\CEO丶轩\AppData\Roaming\Typora\typora-user-images\image-20210801162219559.png)]
定时器
2.**setInterval() 方法会不停地调用函数，直到 clearInterval() **被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
积累：
**siblings()**方法:
1、获取调用元素的父元素下的所有子元素（即它的所有同辈元素和调用元素本身）
2、遍历调用元素父元素下的所有子元素 除调用元素外的所有元素保存在一个数组里面
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发 mouseenter 和 mouseleave 事件。
注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
</body>
</html>
**children() **方法返回被选元素的所有直接子元素。 返回
**DOM 树：**该方法只沿着 DOM 树向下遍历单一层级。如需向下遍历多个层级（返回子孙节点或其他后代），请使用 find() 方法。
**提示：**如需沿着 DOM 树向上遍历单一层级，或向上遍历直至文档根元素的所有路径（返回父节点或其他祖先），请使用 parent() 或 parents() 方法。
|