一、JQuery基础
概念：是JavaScript的框架，简化JS开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义js框架</title>
<script src="js/itcast.js"></script>
</head>
<body>
<div id = "div1">div1</div>
<div id = "div2">div2</div>
<script>
// 1.获取元素对象
//var div1 = document.getElementById("div1");
//var div2 = document.getElementById("div2");
var div1 = get("div1");
var div2 = get("div2");
// 2.获取标签体内容
alert(div1.innerHTML);
alert(div2.innerHTML);
</script>
</body>
</html>js文件
// 封装方法,根据ID来获取对象
function get(id){
var obj = document.getElementById(id);
return obj;
}会弹出相应的信息：
javascript框架：本质上是一些js文件，封装了js的原生代码
二、JQuery快速入门
1、需要下载JQuery（官网下载）
2、导入JQuery的js文件（注意：导入min.js文件，一般新建一个JS文件，然后将这个下载的文件放进去）
3、使用（新建一个网页）
注意标签<script src ="xxx.js"> <script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-JQuery快速入门</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id = "div1">div1</div>
<div id = "div2">div2</div>
<script>
// 1.使用JQuery获取元素对象
var div1 = $("#div1");
alert(div1.html());
var div2 = $("#div2");
alert(div2.html());
</script>
</body>
</html>用IDEA中右上角浏览器打开：
三、JQuery对象和JS对象的转换
1.JQuery操作时更加方便
2.两者设置的方法是不通用的
3.需要两者的转换
JQuery--js:JQuery对象[索引] 或者 JQuery.get(索引)
比如JQuery对象用JS对象方式转换标签
$divs[0].innerHTML="DDD";
$divs.get(1).innerHTML = "DDD";
js--JQuery: $(JS)对象
比如js对象用jQuery对象方式转换标签
$(divs[i]).html("ccc");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery对象和JS对象的转换</title>
<script src = "js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id = "div1">div1..</div>
<div id= "div2">div2..</div>
<script>
// 通过js方式获取div的所有html对象
var divs = document.getElementsByTagName("div");
alert(divs.length);// 可以将其当做数组来使用
// 对divs中所有的div 让其标签体内容变为“aaa”
for(var i = 0 ;i < divs.length;i++ ){
divs[i].innerHTML = "aaa";
}
// 通过JQuery
var $divs = $("div");
alert($divs.length); // 也可以当做数组使用
// 将其标签内容变为“bbb”,使用jQuery的方式
$divs.html("bbb");
</script>
</body>
</html>测试结果：
JQuery对象和JS对象的转化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery对象和JS对象的转换</title>
<script src = "js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id = "div1">div1..</div>
<div id= "div2">div2..</div>
<script>
// 通过js方式获取div的所有html对象
var divs = document.getElementsByTagName("div");
alert(divs.length);// 可以将其当做数组来使用
// 对divs中所有的div 让其标签体内容变为“aaa”
for(var i = 0 ;i < divs.length;i++ ){
//divs[i].innerHTML = "aaa";
$(divs[i]).html("ccc");//js-jq
}
// 通过JQuery
var $divs = $("div");
alert($divs.length); // 也可以当做数组使用
// 将其标签内容变为“bbb”,使用jQuery的方式
// $divs.html("bbb");
$divs[0].innerHTML="DDD"; // jq-js
</script>
</body>
</html>四、选择器
1、选择器的作用：可以筛选具有相似特征的元素；
2、基本语法
时间注册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2..</div>
<input type="button" value="点我" id = "b1">
<script>
// 给b1按钮添加单击事件
// 1、获取b1按钮
$("#b1").click(function () {
alert("abc");
})
</script>
</body>
</html>点击“点我”
3、入口函数：
$(function(){
$("#b1").click(function () {
alert("abc");
});
});或者：
window.onload = function(){
// 1、获取b1按钮
$("#b1").click(function () {
alert("abc");
})
}两种方法的区别：
window.onload 只能定义一次，window.onload = fun1 与 window.οnlοad=fun2 中，同时运行，fun2的值一定会把fun1的值覆盖
但是function()可以定义多次
4、样式控制
div1设置背景色：
$(function(){
$("#div1").css("background-color","green");
});五、选择器的分类
5.1基本选择器
标签选择器（元素选择器）
语法：$("html标签名") 获取所有匹配标签名称的元素
id选择器
语法：$("#id的属性值") 获得与指定id属性相匹配的元素
类选择器
语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
并集选择器
语法：$("选择器1，选择器2....")获取多个选择器选中的所有元素
例子：
$(function(){
// 给one的元素背景设为黄色
$("#b1").click(function(){
$("#one").css("backgroundColor","yellow");
});
// div所有的元素背景色改为粉色
$("b2").click(function(){
$("div").css("background-color","pink")
});
});5.2层级选择器
后代选择器
语法：$("A B ") 选择A元素内部所有的B元素（A的范围比B大）
子选择器
语法：$("A > B")选择A元素内部所有的B子元素
例子:
// 将<body>内所有的<div>的背景色设置粉色
$(function(){
$("#b1").click(function(){
$("body div").css("backgroundColor","pink")
});
});或者
$(function(){
$("#b1").click(function(){
$("body>div").css("backgroundColor","pink")
});
});5.3属性选择器
属性名称选择器
语法：$("A[属性名]") 包含指定属性的选择器
属性选择器
语法：$("A[属性名='值']")包含指定属性等于指定器的选择器
复合属性选择器
语法：$("A[属性值='值'][]....")包含多个属性条件的选择器
例：
含有属性title的div元素，背景设为粉色
$(function(){
$("#b1").click(function(){
$("div[title]").css("backgroundColor","pink")
})
});属性title值等于test的div元素，背景设为粉色
$(function(){
$("#b2").click(function(){
$("div[title='test']").css("backgroundColor","pink")
})
});属性title值不等于test的div元素（没有属性title的也会被选中）
$(function(){
$("#b3").click(function(){
$("div[title!='test']").css("backgroundColor","pink")
})
});属性为title，以te开始的div元素
$(function(){
$("#b4").click(function(){
$("div[title^='te']").css("backgroundColor","pink")
})
});属性为title，以est结束的div元素
$(function(){
$("#b5").click(function(){
$("div[title$='est']").css("backgroundColor","pink")
})
});属性为title，含有es的div元素
$(function(){
$("#b6").click(function(){
$("div[title*='es']").css("backgroundColor","pink")
})
});选取有属性id的元素，然后在结果中选取属性title值含有“es”的div元素
$(function(){
$("#b7").click(function(){
$("div[id][title*='es']").css("backgroundColor","pink")
})
});5.4过滤选择器
首元素选择器
语法：first
尾元素选择器
语法：last
例：
改变第一个/最后一个div元素的背景色
$(function(){
$("#b1").click(function(){
$("div：first").css("backgroundColor","pink")
})
});
$(function(){
$("#b2").click(function(){
$("div：last").css("backgroundColor","pink")
})
});非元素选择器
语法：not(selector) 不包括指定内容的元素
例：
改变class不为one的所有div元素
$(function(){
$("#b3").click(function(){
$("div:not(.one)").css("backgroundColor","pink")
})
});偶数选择器（从0开始计数）
语法：EVEN
奇数选择器
语法：ODD
$(function(){
$("#b4").click(function(){
$("div:even").css("backgroundColor","pink")
})
});
$(function(){
$("#b5").click(function(){
$("div:odd").css("backgroundColor","pink")
})
});等于索引选择器
语法：eq(index)
大于索引选择器
语法：gt(index)
小于索引选择器
语法：lt(index)
例：改变索引值小于3的div元素的背景色
$(function(){
$("#b6").click(function(){
$("div:lt(3)").css("backgroundColor","pink")
})
});标题选择器
语法：header(h1-h6)
5.5表单过滤选择器
可用元素选择器
语法：enabled
利用JQuery对象的val方法改变表内可用<input>元素的值
$(function(){
$("#b1").click(function(){
$("input[type='text']:enabled").val("abc");
});
});不可用元素选择器
语法：disabled
选中选择器
语法：checked 获得单选/复选框中的元素
例子：利用JQuery对象的length属性获取复选框选中的个数
$(function(){
$("#b2").click(function(){
alert($("input[type='checkbox']:checked").length);
});
});选中选择器
语法：selected 获得下拉框选中的元素
$(function(){
$("#b3").click(function(){
alert($("#job:selected").length);
});
});六、DOM操作
1.内容操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
// 获取myinput的value值
var value = $("#myinput").val();
alert(value);
// 获取mydiv的标签体内容
var html = $("#mydiv").html();
alert(html);
// 获取mydiv文本内容
var text = $("#mydiv").text();
alert(text);
$("#mydiv").text("ABC");
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="张三" /><br />
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>html():获取/设置元素的标签体内容
<a><font>内容</font></a>-----获取到<font>内容</font>
text()：获取/ 设置元素的纯文本内容
<a><font>内容</font></a>-----获取到 内容
val(): 获取/ 设置元素的value属性值
2.属性操作
通用属性操作
attr() :获取/ 设置元素的属性
removeAttr():删除属性
prop():获取/设置元素的属性
removeProp():删除属性
例子：
<script>
$(function(){
// 获取北京节点的name属性值
var name = $("#bj").attr("name");
alert(name);
// 设置北京的name属性值debeijing
$("#bj").attr("name","debeijing");
//新增北京节点的discription属性 属性值didu
$("#bj").attr("discription","didu");
// 删除北京节点的name属性并验证name属性是否存在
$("#bj").removeAttr("name");
// 获得hobby的选中状态
$("#hobby").prop("checked");
});
</script>
</head>
<body>
<ul>
<li id="bj" name="beijing" xxx="yyy"> 北京 </li>
<li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby" />
</body>
</html>注意:attr和prop的区别？
如果操作的是元素的固有属性，建议用prop，自定义的属性，建议用attr。
对class属性操作
addClass():添加
removeClass():删除
toggleClass()：切换class属性
比如：toggleClass("one")：判断如果元素对象上存在class=“one”,则将属性one删除
例：
<script>
$(function(){
// 采用属性增加样式（改变id=one的样式）
$("#b1").click(function(){
$("#one").prop("class","second");
})
$("#b2").click(function(){
$("#one").addClass("second");
})
$("#b3").click(function(){
$("#one").removeClass("second");
})
// 切换样式
$("#b4").click(function(){
$("#one").toggleClass("second");// 有“second”属性则删除，无则添加
})
});
</script>CRUD操作
append()
对象1.append（对象2）：将对象2添加到对象1元素的内部，并且在末尾
prepend()
对象1.prepend(对象2)：将对象2添加到对象1元素的内部，并且在开头
appendTo()
对象1.appendTo(对象2):对象1添加到对象2内部，并且在尾部
prependTo()
对象1.prependTo(对象2):将对象1添加到对象2的内部，并且在开头
after()
1.after(2):将2添加到1后面，兄弟关系
before()
1.before（2）：将2添加到1前面，兄弟关系
insertAfter()
1.insertAfter(2)：将2添加到1后面，兄弟关系
insertBefore()
1.insertBefore(2)：将2添加到1前面，兄弟关系
remove（）
对象.remove()
empty（）
对象.empty()
例：
<script>
$(function(){
// 反恐放在city的后面
$("#b1").click(function(){
$("#city").append($("#fk"));
})
// 反恐在city的最前面
$("#b2").click(function(){
$("#fk").prependTo($("#city"));
})
// 反恐插入到天津后面
$("#b3").click(function(){
$("#tj").after($("#fk"));
})
// 反恐插入到天津前面
$("#b4").click(function(){
$("fk").insertAfter($("#tj"));
})
// 删除北京
$("#b5").click(function(){
$("#bj").remove();
});
$("#b6").click(function(){
$("#city").empty();
});
});
</script>
</head>
<body>
<input type="button" value="将反恐放置到city后面" id="b1" />
<input type="button" value="将反恐放置到city最前面" id="b2" />
<input type="button" value="将反恐插入到天津后面" id="b3" />
<input type="button" value="将反恐插入到天津后面" id="b1" />
<ul>
<li id="bj" name="beijing" > 北京 </li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<u1 id="love">
<li id="fk" name="fankong" >反恐</li>
<li id="xj" name="xinji" >星际</li>
</u1>
<div id="fool">hello</div>
</body>
</html>get！
扫一扫
7331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
