jQuery
一.jQuery概述
- jQuery是于2006年初建立的一个轻量级javascript库(即一个快速的，简洁 的javaScript库)。Jquery是对javaScript做了轻量级的封装,简化语法
- jQuery 理念: 写得少(语法简单), 做得多(功能强大)
误区：jquery代替了JavaScript 这是错误的
二.jQuery对象与Dom对象
1.jQuery 对象
(1) jQuery 对象就是通过 jQuery() 或$()包装 DOM 对象后产生的对象。
(2) jQuery 对象是 jQuery 独有的,如果一个对象是 jQuery 对象, 那么它就可 以使用 jQuery 里的方法: $(“#id”).html();
(3) jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法。
2.jQuery和Dom对象的区别
原生dom对象实际表示网页中的标签，jquery对象是一个数组对象，将原生的dom对象包含在里面，然后再数组对象中封装了许多方法
3.jQuery对象和Dom对象的相互转换
（1）jQuery 对象转成 DOM 对象
（2）Dom对象转换成jQuery对象
代码及注释示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<!--
jquery:于2006年初创建的一个轻量级的JavaScript库，对JavaScript做了轻量级的封装，简化了语法
理念：写得少（语法简单），做得多
误区：jquery代替了JavaScript 这是错误
jpuery对象和dom对象的区别：
原生dom对象实际表示网页中的标签，jqurey对象是一个数组对象将原生的dom对象包含在里面，然后再在数组对象中
封装了许多方法
-->
<script type="text/javascript">
function test(){
var textObjdom=document.getElementById("textid");
// alert(textObjdom);
var textObjjquery=$("#textid"); //获得id对象
// alert(textObjjquery);
// alert(textObjdom.value); //1
// alert(textObjjquery.value); //undefined 因为jquery获得的是一个数组对象不能直接调用其中的value属性
//dom对象转为jquery对象
alert($(textObjdom));
//jquery对象转为dom对象
alert(textObjjquery[0]); //第一种方法
alert(textObjjquery.get(0)); //第二种方法
// dom对象中的方法与jquery对象中的方法完全不同，不能相互调用
}
</script>
</head>
<body>
<input type="text" name="" id="textid" value="1" />
<input type="button" name="" id="" value="点击" onclick="test()"/>
</body>
</html>
三.选择器
（1）选择器是 jQuery 的根基, 在 jQuery 中对事件处理, 遍历 DOM 操作都依赖于选择器
1.基本选择器
2.表单选择器
选择器代码示例及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function test(){
//id选择器
//var obj = $("#textid");
//标签选择器
//var objs = $("input");
//类选择器
//var objs = $(".incss");
//选择器组合
//var objs = $(".incss,input");
//通配选择器
//var objs = $("*");
//var objs = $("li:first");
//var objs = $(".lis:first");
//var objs = $(".lis:last");
//var objs = $("li:odd")
//var objs = $("li:even")
//var objs = $("li:gt(0)")
//var objs = $("li[name]")
var objs = $("li[name!='aa']")
console.log(objs.length)
}
</script>
</head>
<body class="incss">
<input type="text" id="textid" class="incss"/>
<ul>
<li class="lis" name="aa">list item 1</li>
<li class="lis" name="bb">list item 2</li>
<li class="lis">list item 3</li>
<li class="lis">list item 4</li>
<li class="lis">list item 5</li>
</ul>
<input type="button" value="测试" onclick="test()" />
</body>
</html>
注：其中的奇偶选择器用法注意
3.奇数偶数选择器
//var objs = $("li:odd") 选择奇数咧
//var objs = $("li:even") 选择偶数列
<ul>
<li class="lis" name="aa">list item 1</li>
<li class="lis" name="bb">list item 2</li>
<li class="lis">list item 3</li>
<li class="lis">list item 4</li>
<li class="lis">list item 5</li>
</ul>
四.jQuery操作
1.操作—html属性
方法：
-
val() 获得第一个匹配标签的当前值
-
val(val)设置所有匹配标签的值
-
attr(name)获得第一个匹配标签的属性值
-
attr(name,value)设置所有匹配的标签设置一个属性值
-
attr方法只能操作标签中已经定义的属性,不能操作动态添加的属性
-
removeAttr(name);删除所有匹配的标签中已经定义的属性
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function test(){
//val() 获得第一个匹配标签的value属性值
//val(v) 设置所有匹配的标签的value属性值
//$("#textid2").val($("#textid1").val());
//console.log($("input").val());
//$("input").val("aaa");
//attr("属性名") 获得指定属性的值
//console.log($("input").attr("type"));
//attr("name","value"); 设置匹配标签的属性值
//$(":checkbox").attr("checked",false);
//删除属性
//$(":checked").attr("checked",false);
$(":checked").removeAttr("checked");
// $("input").attr("type","checkbox"); 注：在jquery对象中type属性不可以被改变dom原生对象可以
}
</script>
</head>
<body>
<input type="text" id="textid1"/>
<input type="text" id="textid2" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="button" value="测试" onclick="test()" />
</body>
</html>
2.操作—css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.divclass{
background-color: aquamarine;
width: 100px;
height: 500px;
}
</style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test(){
// console.log($("#div1").css("background-color"));
// 获取指定属性的值
// $("#div1").css("background-color","red");
// 设置css属性的值 css(name,value) 设置的时行内样式表优先级高
// $("#div1").css({"background-color":"black","width":"500px"});
// 设置属性值
// $("#div2").addClass("divclass");
// $("#div2").removeClass("divclass");
// 给指定标签添加或删除类
$("#div2").toggleClass("divclass");
// 为指定标签切换类 有就删除 没有就添加
}
</script>
</head>
<body>
<div id="div1" style="background-color: aqua; height: 30px;">
div1
</div>
<div id="div2" >
div2
</div>
<input type="button" name="" id="" value="测试" onclick="test()" />
</body>
</html>
3.操作—文本
方法：
代码及示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test(){
// alert($("#div1").html()); div1 获得html内容包含标签
// alert($("#div1").text()); 只获得文本不包含标签
// $("#div2").html("<b>aaaaa</b>"); // aaaaa(加粗的) 设置文本内容 会解析字符串中的标签
// $("#div2").text("<b>aaaaa</b>"); // <b>aaaaa</b> 设置文本内容 不会解析字符串中的标签
// $("#div1").append("<b>aaaaa</b>"); //向标签中末尾追加html内容
// $("#div1").before("<b>aaaaa</b>"); //向标签之前添加html内容
// $("#div1").after("<b>aaaaa</b>"); //向标签之后添加html内容
// $("p").appendTo("#div1"); //将指定的标签移动到指定的标签中
// $("#div1").remove(); //删除指定的标签
// $("#div1").empty(); //清除标签中的内容
}
</script>
</head>
<body>
<p>段落</p>
<div id="div1">
<b>div1</b>
</div>
<div id="div2">
</div>
<input type="button" name="" id="" value="测试" onclick="test()" />
</body>
</html>
五.筛选
1.祖先
● 筛选是对获取的对象进行筛选，最终留下符合某些特征的对象。
parent()返回被选标签的直接父标签
parents()返回被选标签的所有祖先标签，它一路向上直到文档的根标签 ()
2.后代
- children()返回被选标签的所有直接子标签
- find()返回被选标签的后代标签，一路向下直到最后一个后代
3.同胞
- siblings()返回被选标签的所有同胞标签
- next()返回被选标签的后一个相邻标签
- nextAll()返回被选标签的所有后面的同胞标签
- prev()返回被选标签的前一个相邻标签
- prevAll()返回被选标签的所有前面的同胞标签
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test(){
//祖先筛选
// var objs=$("#div1").parent(); //只获得直接上级标签
// var objs=$("#div1").parents(); //获得所有父级标签
// var objs=$("#div1").parents("html"); //获得祖先中指定的标签
// 后代筛选
// var objs=$("#div1").children(); //获得所有的儿子级别的标签
// var objs=$("#div1").children("p"); //获得所有儿子级别标签中的指定标签
// var objs=$("#div1").find("b"); //获得所有后代标签中的指定标签
// 同胞筛选
// var objs=$("#div1+p"); //只能向下找 ？
// var objs=$("#div1").siblings(); //获得上下所有的兄弟标签
// var objs=$("#div1").siblings("p"); //获得上下所有指定的兄弟标签
// var objs=$("#div1").next(); //获得被选标签的后一个相邻标签
// var objs=$("#div1").nextAll(); //获得被选标签后的所有同胞标签
// var objs=$("#div1").nextAll("p"); //获得被选标签后的所有指定标签
// var objs=$("#div1").prev(); //获得被选标签的前一个相邻标签
// var objs=$("#div1").prevAll(); //获得被选标签的所有前面的同胞标签
var objs=$("#div1").prevAll("p"); //获得被选标签前面的所有指定标签
console.log(objs.length);
}
</script>
</head>
<body>
<p>同胞标签 上</p>
<p>同胞相邻标签</p>
<div id="div1">
div1
<p>
<b>div的孙子</b>
</p>
<b>div的儿子</b>
</div>
<p>同胞相邻标签</p>
<p>同胞标签 下</p>
<div id="div2">
</div>
<input type="button" name="" id="" value="测试" onclick="test()" />
</body>
</html>
4.过滤
- first()返回被选标签的首个标签
- last()返回被选标签的最后一个标签
- eq()返回被选标签中带有指定索引号的标签
- filter()返回匹配的标签
- not()返回不匹配标准的所有标签
- is() 根据选择器、标签或 jQuery 对象来检测匹配标签集合，如果这些 标签中至少有一个标签匹配给定的参数，则返回 true
- hasClass()检查当前的标签是否含有某个特定的类，如果有，则返回 true。
六.事件
1.ready事件
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fTjZdYwd-1633406565669)(C:\Users\封纪元\AppData\Roaming\Typora\typora-user-images\1632384003725.png)]](https://i-blog.csdnimg.cn/blog_migrate/79528834424d8e912431853b86af2054.png)
2.绑定事件
3.合成事件
4.其他常用事件
5.事件具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){ //ready等于onload事件 网页加载后就执行
// $("#btnid").click(function() {
// alert("按钮");
// });
//批量处理
// $("input[type='button']").click(function(){ //批量为标签添加处理函数添加事件及处理函数
// // alert(this.value); 或者
// alert($(this).val());
// });
// bind事件
// $("#btnid").bind("click",function(){ //添加事件
// alert(this.value)
// })
// unbind事件
// $("#btnid").unbind("click"); //删除事件
//hover(over,out) 事件 over鼠标移入 out鼠标移出
// $("#btnid").hover(function(){
// $(this).css("background-color","red")
// },
// function(){
// $(this).css("background-color","aqua")
// }
// )
//toggle(fn1,fn2.....) 事件 至少两个 多个函数轮流切换
// $("#btnid").toggle(function(){
// $(this).css("background-color","red")
// },
// function(){
// $(this).css("background-color","aqua")
// } )
// one() 一次性事件
// $("#btnid").one("click",function(){
// alert("弹出");
// })
});
//resize() 监听浏览器发生改变时触发 直接写在script标签下
$(window).resize(function(){
console.log(innerWidth+"------"+innerHeight);
})
</script>
</head>
<body>
<input type="button" name="" id="btnid" value="按钮1" />
</body>
</html>
扫一扫
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
