一、jquery
jquery是一个轻量级的js库
优点:
1、写得少,做的多;
2、强大的元素选择器,使用的是css1-css3所有选择器;
3、它简化了dom操作,优化了事件机制
1.1使用jquery
标识符$;jquery()执行。要使用jquery,要先引入jquery的库,如果元素初始化了,直接写jquery代码;如果元素未初始化,写dom加载完成事件。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="./js/jquery-1.9.1.js"></script>
</head>
<body>
<script>
$(window).ready(function(){
console.log("dom加载完成")
});
//简写
$(function(){
console.log("这就是简写")
})
</script>
</body>
</html>
结果:
二、jquery选择器
2.1 class、id、*、element选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button class="btn" id="ts">按钮</button>
<button id="ts1">按钮</button>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
/*
* jquery dom元素获取返回的集合类型
* 选择器
* dom元素获取
* */
console.log($("*"));
console.log($("button"));
console.log($(".btn"));
console.log($("#ts"));
console.log($("#ts,#ts1"));
</script>
</body>
</html>
结果:
2.2 ul,li
由于网页结果不好展示,我把意思注释到代码里面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button{
display: none;
}
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button class="btn" id="ts">按钮</button>
<button id="ts1">按钮</button>
<ul class="menu">
<li>1</li>
<li class="child">2
<ul>
<li>2-1</li>
<li>2-2</li>
<li>生活糟糕透顶</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
/*
* jquery dom元素获取返回的集合类型
* 选择器
* dom元素获取
* */
/*console.log($("*"));
console.log($("button"));
console.log($(".btn"));
console.log($("#ts"));
console.log($("#ts,#ts1"));*/
console.log($("ul li"));
console.log($("ul.menu>li"));
console.log($("ul.menu>li:nth-child(1)+li")); //:nth-child() 匹配其父元素下的第n个子或奇偶元素
console.log($("ul.menu>li:nth-child(1)~li"));
console.log($("ul.menu>li:first"));
console.log($("ul.menu>li:first-child"));
console.log($("ul.menu>li:not(.child)")); //:not() 去除所有与给定选择器匹配的元素
console.log($("ul.menu>li:even")); //:even 匹配所有索引值为偶数的元素,从 0 开始计数
console.log($("ul.menu>li:odd")); //:odd 匹配所有索引值为奇数的元素,从 0 开始计数
console.log($("ul.menu>li:eq(1)")); //:eq() 匹配一个给定索引值的元素
console.log($(".menu>li:lt(2)")); //lt() 匹配所有小于给定索引值的元素
console.log($(".menu>li:gt(2)")); //gt() 匹配所有大于给定索引值的元素
</script>
</body>
</html>
结果:
2.3 基本(header、:focus、:root、)内容(contains()、:empty、:has、:parent、)可见性的(:visible、:hidden)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input:focus{
color: yellowgreen;
}
button{
display: none;
}
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button class="btn" id="ts">按钮</button>
<button id="ts1">按钮</button>
<ul class="menu">
<li>1</li>
<li class="child">2
<ul>
<li>2-1</li>
<li>2-2</li>
<li>生活糟糕透顶</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li></li>
</ul>
<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
<input type="text">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
/*
* jquery dom元素获取返回的集合类型
* 选择器
* dom元素获取
* */
/*console.log($("*"));
console.log($("button"));
console.log($(".btn"));
console.log($("#ts"));
console.log($("#ts,#ts1"));
console.log($("ul li"));
console.log($("ul.menu>li"));
console.log($("ul.menu>li:nth-child(1)+li"));
console.log($("ul.menu>li:nth-child(1)~li"));
console.log($("ul.menu>li:first"));
console.log($("ul.menu>li:first-child"));
console.log($("ul.menu>li:not(.child)"));//去除所有与给定选择器匹配的元素
console.log($("ul.menu>li:even"));//匹配所有索引值为偶数的元素,从 0 开始计数
console.log($("ul.menu>li:odd"));//匹配所有索引值为奇数的元素,从 0 开始计数
console.log($("ul.menu>li:eq(1)"));//匹配一个给定索引值的元素
console.log($(".menu>li:lt(2)"));//匹配所有小于给定索引值的元素
console.log($(".menu>li:gt(2)"));//匹配所有大于给定索引值的元素*/
console.log($("body :header"));//匹配如 h1, h2, h3之类的标题元素
$("input").focus();
console.log($("body:focus"));//默认获得焦点
console.log($(":root"));//选择该文档的根元素
console.log($("ul>li:contains(生活)"));//匹配包含给定文本的元素
console.log($("div:empty"));
console.log($("ul.menu:has(.child)"));//保留包含特定后代的元素,去掉那些不含有指定后代的元素。
console.log($("div:parent")); //匹配的元素必须有子元素或者 内容
console.log($(":visible"));//匹配所有的可见元素
console.log($(":hidden"));//匹配所有不可见元素,或者type为hidden的元素
console.log($("input[type]"));
console.log($("input[type='text']"));
console.log($("input[type^='t']"));//属性值是以t开头的
console.log($("input[type$='t']"));//属性值是以t结尾的
console.log($("input[type*='x']"));//属性值是含有t的
console.log($("input[type][class][id]"));//同时含有type、class、id、属性
</script>
</body>
</html>
结果:
2.4 子元素(:first-child、:first-of-type、:last-child、:last-of-type、:nth-child、 :nth-last-child()、:nth-last-of-type()、:nth-of-type())
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input:focus{
color: yellowgreen;
}
button{
display: none;
}
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button class="btn" id="ts">按钮</button>
<button id="ts1">按钮</button>
<ul class="menu">
<li>1</li>
<li class="child">2
<ul>
<li>2-1</li>
<li>2-2</li>
<li>生活糟糕透顶</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li></li>
</ul>
<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
<input type="text">
<div>
</div>
<ul id="nav">
<li>1</li>
<p>2</p>
<li>3</li>
<p>4</p>
<li>5</li>
<p>6</p>
<li>7</li>
<p>8</p>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
/*
* jquery dom元素获取返回的集合类型
* 选择器
* dom元素获取
* */
/*console.log($("*"));
console.log($("button"));
console.log($(".btn"));
console.log($("#ts"));
console.log($("#ts,#ts1"));
console.log($("ul li"));
console.log($("ul.menu>li"));
console.log($("ul.menu>li:nth-child(1)+li"));
console.log($("ul.menu>li:nth-child(1)~li"));
console.log($("ul.menu>li:first"));
console.log($("ul.menu>li:first-child"));
console.log($("ul.menu>li:not(.child)"));//去除所有与给定选择器匹配的元素
console.log($("ul.menu>li:even"));//匹配所有索引值为偶数的元素,从 0 开始计数
console.log($("ul.menu>li:odd"));//匹配所有索引值为奇数的元素,从 0 开始计数
console.log($("ul.menu>li:eq(1)"));//匹配一个给定索引值的元素
console.log($(".menu>li:lt(2)"));//匹配所有小于给定索引值的元素
console.log($(".menu>li:gt(2)"));//匹配所有大于给定索引值的元素
console.log($("body :header"));//匹配如 h1, h2, h3之类的标题元素
$("input").focus();
console.log($("body:focus"));//默认获得焦点
console.log($(":root"));//选择该文档的根元素
console.log($("ul>li:contains(生活)"));
console.log($("div:empty"));
console.log($("ul.menu:has(.child)"));//保留包含特定后代的元素,去掉那些不含有指定后代的元素。
console.log($("div:parent")); //匹配的元素必须有子元素或者 内容
console.log($(":visible"));//匹配所有的可见元素
console.log($(":hidden"));//匹配所有不可见元素,或者type为hidden的元素
console.log($("input[type]"));
console.log($("input[type='text']"));
console.log($("input[type^='t']"));
console.log($("input[type$='t']"));
console.log($("input[type*='x']"));
console.log($("input[type][class][id]"));*/
console.log($("#nav>li:first-child"));//匹配第一个子元素
console.log($("#nav>li:last-child"));//获取最后个元素
console.log($("#nav>li:first-of-type"));//选择所有相同的元素名称的第一个兄弟元素。
console.log($("#nav>li:last-of-type"));//选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
console.log($("#nav>li:nth-child(3)"));//匹配其父元素下的第N个子或奇偶元素
console.log($("#nav>li:nth-last-child(2)"));//选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
console.log($("#nav>li:nth-of-type(2)"));//选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。
console.log($("#nav>li:nth-last-of-type(2)"));//选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个。
</script>
</body>
</html>
结果:
2.5 表单以及表单对象属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input:focus{
color: yellowgreen;
}
button{
display: none;
}
</style>
</head>
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
<option value="">选择</option>
<option value="">榆林</option>
<option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
console.log($(":input"));//:input 匹配所有 input, textarea, select 和 button 元素
console.log($(":text"));// :text 匹配所有的单行文本框
console.log($(":password"));// :password 匹配所有密码框
console.log($(":radio"));// :radio 匹配所有单选按钮
console.log($(":checkbox"));// :checkbox 匹配所有复选框
console.log($(":submit"));// :submit 匹配所有提交按钮
console.log($(":reset"));// :reset 匹配所有重置按钮
console.log($(":file"));//:file 匹配所有文件域
console.log($(":image"));// :image 匹配所有图像域
console.log($("input:disabled"));// :disabled 匹配所有不可用元素
console.log($("input:enabled"));// :enabled 匹配所有可用元素
console.log($("input[type=radio]:checked"));// :checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
console.log($("select>option:selected"));// :selected 匹配所有选中的option元素
</script>
</body>
</html>
结果:
三 属性操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid #000;
}
.box{
width: 100px;
height: 100px;
}
.box1{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input type="text" id="ipt" value="110" class="info"/>
<input type="text" id="ipt1" value="2017" class="info"/>
<input type="checkbox" class="ckbox"/>篮球
<input type="checkbox" class="ckbox"/>足球
<input type="checkbox" class="ckbox"/>乒乓球
<button id="fbtn">反选</button>
<div class="box block"></div>
<input type="text" id="list"/>
<div class="content"></div>
<input type="checkbox" class="hobby" value="a"/>篮球
<input type="checkbox" class="hobby" value="b"/>足球
<input type="checkbox" class="hobby" value="c"/>羽毛球
<script src="js/jquery-1.9.1.js"></script>
<script>
//属性
/* * 获取或者设置属性的值
*
* jquery 里面可以进行一堆操作
* */
// attr():获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
/*console.log($("#ipt").attr("value"));
$("#ipt").attr("value", "456");
//回调函数写法
$("#ipt").attr("value", function (index, val) {
console.log(index, val);
return val * val;
});
console.log($(".info").attr("value"));
//removeAttr 从每一个匹配的元素中删除一个属性
$("#ipt").removeAttr("value");
// prop ()获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性。
/ !*console.log($("#ipt1").prop("value"));
$("#ipt1").prop("value","abc");
$("#ipt1").prop("value",function (index,val){
console.log(index,val);
return val+"m";
});*!/
//removeProp()用来删除由.prop()方法设置的属性集
/!* $("#ipt1").removeProp("value");//
$("#ipt1").removeAttr("value");*!/
//自定义属性
$("#ipt1").attr("data-index",0);
console.log($("#ipt1").attr("data-index"));
$("#ipt1").removeAttr("data-index");
$("#ipt1").prop("data-page",1);
console.log($("#ipt1").prop("data-page"));
$("#ipt1").removeProp("data-page");
console.log($("#ipt1").prop("data-page"));
$("#fbtn").click(function (){
$(".ckbox").each(function (index){
console.log(!undefined);
$(this).prop("checked",!$(this).prop("checked"));
});
});
//class 属性操作
//为每个匹配的元素添加指定的类名。
$(".block").addClass("box1 user");
//从每一个匹配的元素中删除一个属性
$ (".block").removeClass("user");
//toggleClass 类别切换
$(".block").toggleClass("box");
$(".block").toggleClass("box");
$(".block").addClass(function (index,elec){
return "data";
})
$(".block").removeClass(function (index,elec){
console.log(index,elec);
return "data";
});
$(".block").toggleClass(function (index,elec){
console.log(index,elec);
return "user";
},false);
//文本或者值操作
//html() 获取或者设置元素的内容值
//text() 获取或者设置元素的文本值
//val() 获取或者设置元素value
$(".content").html("<span>123</span>");
$(".content").text("<span>123</span>");
console.log($(".content").html());
console.log($(".content").text());
$(".content").html(function (index,val){
console.log(index,val);
return "不知道"
});
$(".content").text(function (index,val){
console.log(index,val);
return "text"
});
//值操作
//val 获取或者设置value
$("#list").val("。。。。");
console.log($("#list").val());
$("#list").val(function (index,val){
console.log(index,val);
return "换值";
});*/
/*$(".hobby").val(["a","","c"]);*/
$(".hobby").eq(0).val(["a"]);
</script>
</body>
</html>
结果:
四、css操作
css()获取或设置元素的css,jquery里面可以进行链式操作;
例如:
$("#box").css("width","200px").css("height","200px").css("border","1px solid #000");
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
position: relative;
}
.list{
width: 200px;
height: 200px;
overflow: scroll;
border: 5px solid #000;
padding: 10px;
margin: 10px;
}
.block{
width: 500px;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box"></div>
<div class="list">
<div class="block"></div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#box").css({
width:"100px",
height:"100px",
border:"1px solid #000",
backgroundColor:"red"
});
console.log($("#box").css("border"));
//offset 相对适口的偏移
console.log($("#box").offset());
//position 相对父元素的偏移
//父元素 相对定位
console.log($("#box").position());
//scrollTop 获取或设置元素的上滑距
console.log($(".list").scrollTop());
$(".list").scrollTop(100);
console.log($(".list").scrollLeft());
$(".list").scrollLeft(100);
/*
* width() 设置或获取
* */
//$(".list").width(300);
console.log($(".list").width());
//$(".list").height(300);
console.log($(".list").height());
console.log($(".list").innerHeight());
console.log($(".list").innerWidth());
console.log($(".list").outerWidth(true));
console.log($(".list").outerHeight());
</script>
</body>
</html>
结果:
五、文档处理
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">内部插入</div>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<span class="sp">1</span>
<span class="sp">2</span>
<script src="js/jquery-1.9.1.js"></script>
<script>
/*
* 文档处理
*
* jquery创建dom
*内部插入
* */
var ele=$("<span>span</span>");
console.log(ele);
$("#box").append("<span>123</span>");
$("#box").append(ele);
var ele1=$("<span>span1</span>");
console.log(ele1);
ele1.appendTo($("#box"));
//追加到内容之前
$("#box").prepend("abc");
var ele2=$("<span>span2</span>");
$("#box").prepend(ele2);
var ele3=$("<span>span3</span>");
ele3.prependTo($("#box"));
$("#box").append(function (index,html){
console.log(index,html);
return "1111";
});
/*
*外部插入
* */
$("#box").after("123");
//"<span>123</span>".insertAfter($("#box"));
$("<span>123</span>").insertAfter($("#box"));
$("#box").after(function (index){
return "456"
});
$("#box").before($("<h1>123</h1>"))
$("<h1>123</h1>").insertBefore($("#box"));
$("#box").before(function (index){
return $(this);
});
/*
* 包裹
* */
$("#box").wrap("<div></div>");
$("#box").unwrap();
//$(".btn").wrap("<div></div>");
$(".btn").wrapAll("<div></div>");
$(".btn").wrapInner("<span></span>");
$(".btn").replaceWith("<input type='button' class='btn'/>");
$("<button class='btn'></button>").replaceAll($(".btn"));
//清空
$("#box").empty();
$(".btn").eq(2).remove();
//$(".btn").remove();
$(".btn").eq(2).addClass("but");
$(".btn").remove(".but");
$(".sp").eq(1).detach();
console.log($(".sp"));
/*
* 克隆
*
* 默认false 只克隆元素
*
* true 事件处理函数 克隆
* */
$(".sp").eq(0).click(function (){
console.log(1);
});
$(".sp").eq(0).clone(true).appendTo($("body"));
/*
* $(this) this 两者相互转化
* */
</script>
</body>
</html>
结果:
六 筛选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
position: fixed;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
/*
* 筛选
* */
//过滤
console.log($("ul>li").eq(0));
console.log($("ul>li").eq(-1));//注意 倒着找 从-1
console.log($("ul>li").first());
console.log($("ul>li").last());
//直接写名称
console.log($("ul>li").hasClass("li4"));
console.log($("ul>li").is(".li4"));
$("ul>li").each(function (index) {
if ($(this).hasClass("li4")) {
console.log($(this));
}
});
console.log($("ul>li").filter(".li4"));
console.log($("ul>li").filter(function (index) {
if ($(this).is(".li4")) {
return $(this);
}
}));
console.log($("ul>li").is(function (index) {
if ($(this).hasClass("li4")) {
return true;
}
}));
console.log($("ul>li"));
console.log($("ul>li").map(function (index, obj) {
//obj 是原生的js对象
;
return $(obj).text();
}));
console.log($("ul>li").has(".sp"));
console.log($("ul>li").not(".li4"));
console.log($("ul>li").not($("ul>li").has(".sp")));
console.log($("ul>li").not(function (index, obj) {
if ($(obj).is(".li4")) {
return obj;
}
}));
console.log($("ul>li").slice(0, 2));
//查找
//children() 不带参 获取元素的所有子集
console.log($("ul>li").children());
console.log($("ul>li").children(".sps"));
console.log($("li:first").parent());
console.log($("li:first").parents("body"));
console.log($("ul").find(".li4"));
console.log($(".li4").next());
console.log($(".li4").nextAll(".li6"));
console.log($(".li4").prev());
console.log($(".li4").prevAll());
console.log($("ul>li:nth-child(3)").nextUntil(".li4", "p"));
console.log($("ul>li:nth-child(3)").nextAll());
console.log($(".li4").offsetParent());
console.log($(".li4").siblings());
console.log($(".li4").siblings(".li6"));
console.log($(".li6").add($(".li3")));
console.log($(".li6").add("<span>123</span>"));
console.log($(".li6").nextAll().addBack("li"));
console.log($(".li6").contents('.sp1'));
console.log($(".li6").find(".sp1").end());
</script>
</body>
</html>
结果:
七 事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<button id="btn">按钮</button>
</div>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
/*
* 事件
* dom加载完成
* */
$(document).ready(function (){
console.log("dom准备就绪");
});
/*
* 普通事件
*
* 给事件处理函数传递的参数 在 event.data 属性上
* */
/*$(".box").click("user",function (e){
}).mouseenter(function (){
console.log("进入");
}).mouseleave(function (){
console.log("离开");
});
//事件切换 mouseover mouseout
$(".box").hover(function (){
console.log("悬停");
},function (){
console.log("离开");
});*/
/*
* 事件处理
* */
$(".btn").bind("click",1,function (e){
console.log("点击事件绑定", e.data);
}).bind("mouseover",function (){
console.log("mouseover事件");
}).mouseleave(function (){
//移除事件
//unbind 不带参全部事件移除
//指定事件移除
//$(this).unbind();
$(this).unbind("mouseover");
});
/*
* 绑定事件
* */
/* $(".box").on("click",function (){
console.log("on click");
});*/
/* $(".box").on("click",1,function (e){
console.log("on click", e.data);
});*/
//用on 写事件委托
//off 可以委派移除
//不带参 全部移除
// 也可以过滤移除
$(".box").on("click","#btn",function (e){
console.log("on click", e.delegateTarget,$(this)); //delegateTarget 委派元素
}).on("mouseover",function (){
console.log("悬停");
}).on("mouseleave",function (){
//$(this).off("click","#btn");
$(this).off("mouseover");
});
//one 绑定一次性事件
$(".box").one("mousedown",1,function (e){
console.log("mousedown", e.data);
});
// trigger 触发指定事件
$(window).on("keydown",function (e,a){
console.log("按键", a);
}).trigger("keydown",1);
$(".box").on("user-key",function (e,a){
console.log("自定义事件",a);
}).trigger("user-key",1);
$(".box").click(function (){
console.log("box");
});
$("#btn").click(function (e,a){
console.log("btn",a);
//e.originalEvent.cancelBubble=true;
//return false;
//e.stopPropagation();
}).triggerHandler("click",1);
/*
* 事件参数
* */
$("#btn").click(function (e){
console.log(e);
})
</script>
</body>
</html>
结果: