一.初识jQuery
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码的效率,帮助开发者节省了大量的工作,让写出来的代码更加优雅, 更加健壮，“如虎添翼”. 同时网络上丰富
的 jQuery 插件也让我们的工作变成了"有了 jQuery,一切 soeasy."--因为我们已经站在巨人的肩膀上了。
1.jQuery 的下载和安装
官网下载：http://jquery.com/
版本：1）完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)
2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
安装：在页面引入即可
2.jQuery核心
"$"符号在 jQuery 中代表对jQuery 对象的引用, "jQuery"是核心对象，通过该对象可以获取jQuery对象，调用jQuery
提供的方法等。只有jQuery对象才能调用jQuery提供的方法。 $ 相当于就代替 jQuery。
注：只有 jQuery 对象才能调用 jQuery 提供的方法。
3. Uncaught ReferenceError: $ is not defined
报错原因：
1.没有引入jquery文件
2.引入的jquery文件顺序不对
二、DOM对象和jQuery包装集对象
1.Dom对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div"); 2. jQuery 包装集|对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,
比如获取包含一个元素的 jQuery 包装集:
var jQueryObject = $("#testDiv"); 3. Dom转jQuery对象
Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var domDiv = document.getElementById('mydiv'); // 获取Dom对象
mydiv = $(domDiv); 4. jQuery对象转Dom对象
jQuery对象转Dom对象，只需要取数组中的元素即可
//第一种方式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
//第二种方式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0];//将以获取的jquery对象转为dom通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象
$('#mydiv').each(function() {//遍历
var jquery = $(this);
})三.jQuery选择器
1. 基础选择器 Basics（掌握即可）
dom： innerHTML="...."， innerText="....."
jquery： .html("...")， .text("......")
2. 层次选择器Hierarchy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>陈层次选择器</title>
</head>
<body>
<div style="border: solid 1px tan; ">伯伯</div>
<div id="parent" style="border: solid 1px salmon; ">
父亲
<div>
大哥
<div> 大哥的儿子 </div>
<p> 大哥的女儿</p>
</div>
<div>二哥</div>
<div>
三哥
<p> 三哥的女儿 </p>
</div>
<div>我</div>
<p>小妹</p>
</div>
<p style="border: solid 1px blanchedalmond; ">姑姑</p>
<div style="border: solid 1px blueviolet; ">
叔叔
</div>
<div style="border: solid 1px cyan; ">
小叔
</div>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 后代选择器 ancestor descendant
var houdai = $("#parent div");
console.log(houdai);
// 子代选择器 parent > child
var zidai = $("#parent > p");
console.log(zidai);
// 相邻选择器 prev + next （1、只找当前元素的下一个同级 2、只找一个）
var next = $("#parent + div");
console.log(next);
// 同辈选择器 prev ~ sibling
var tb = $("#parent ~ div");
console.log(tb);
</script>
</html>3.过滤选择器
:checked:得到所有checked为true的元素
:eq(index):匹配指定下标的元素
:gt(index):大于指定下标的
:odd 获取所有的奇数位置的元素
:even 获取所有的偶数位置的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
</head>
<body>
<form id='myform' name="myform" method="post">
<input type="hidden" name="uno" value="9999" disabled="disabled" />
姓名: <input type="text" id="uname" name="uname" /><br />
密码: <input type="password" id="upwd" name="upwd" value="123456" /><br />
年龄: <input type="radio" name="uage" value="0" checked="checked" />小屁孩
<input type="radio" name="uage" value="1" />你懂 得 <br />
爱好:
<input type="checkbox" name="ufav" value="篮球" checked="checked" />篮 球
<input type="checkbox" name="ufav" value="爬床" />爬床
<input type="checkbox" name="ufav" value="代码" checked="checked" />代码<br />
来自:
<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选 择
</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select><br />
简介:
<textarea rows="10" cols="30" name="uintro"></textarea><br />
头像: <input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20" />
<button type="submit" onclick="return checkForm();">提交 </button>
<button type="reset">重置</button>
</form>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 元素选择器
var inputs = $("input");
console.log(inputs.length);
// 表单选择器
var inps = $(":input");
console.log(inps.length);
// 获取所有的复选框
var cks = $(":checkbox");
console.log(cks);
console.log($("input:checkbox"));
/*
过滤选择器
:checked:得到所有checked为true的元素
:eq(index):匹配指定下标的元素
:gt(index):大于指定下标的
:odd 获取所有的奇数位置的元素
:even 获取所有的偶数位置的元素
*/
var cked = $(":checked");
console.log(cked);
console.log($(":checkbox:checked"));
var eq1 = $(":checkbox:eq(0)");
console.log(eq1);
var gt1 = $(":checkbox:gt(0)");
console.log(gt1);
</script>
</html>四、jQuery DOM操作
1. 操作元素的属性
1）获取属性
2）设置属性
3）移除属性
4）attr()与prop()的区别：
共同点：都可以获取元素的属性
不同点：
①attr()可以获取自定义属性和固有属性的值，而prop()只能获取固有属性的值 （固有属
性：元素本身就有的属性）
②操作返回值是boolean类型的属性时，attr()返回的是对应的值，而prop()返回的是true和false
如何选择：
如果属性的返回值是boolean类型时，用prop()方法； （checked、selected、disabled）
如果是非boolean类型，则使用attr()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" id="ck1" name="ch" checked="checked" aa="aabb"/> aa
<input type="checkbox" id="ck2" name="ch" /> bb
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 获取元素的属性 （固有属性）
var name1 = $("#ck1").attr("name");
console.log(name1);
var name2 = $("#ck2").prop("name");
console.log(name2);
// 获取元素的属性 （自定义属性属性）
var a1 = $("#ck1").attr("aa");
var a2 = $("#ck1").prop("aa");
console.log(a1,a2);
// 获取元素的属性 （设置过属性且属性返回值是boolean类型）
var c1 = $("#ck1").attr("checked");
var c2 = $("#ck1").prop("checked");
console.log(c1,c2);
// 获取元素的属性 （未设置过属性且属性返回值是boolean类型）
var c11 = $("#ck2").attr("checked");
var c22 = $("#ck2").prop("checked");
console.log(c11,c22);
// 设置元素的属性值
$("#ck1").attr("value","1");
$("#ck2").prop("value","2");
// attr()
$("#ck1").attr("checked","checked");
$("#ck2").prop("checked",true);
// 移除属性
$("#ck1").removeAttr("name");
</script>
</html> 2.操作元素的样式
增加元素的具体样式，格式：
1）css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})
例：css({"background-color":"red","color":"#fff"})2）css(“样式名”,”样式值”)
例：css('color','white')
2）css(“样式名”,”样式值”)
例：css('color','white')
attr():设置样式时，会重新设置class的属性值，所以会将原来的样式覆盖
addClass():添加样式，原来的样式依然保留，如果出现了相同样式，以后定义的样式为准
css():设置具体的样式（设置行内样式，写在style属性中的样式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作元素的样式</title>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.green {
background : green;
}
.red {
background : red;
}
</style>
</head>
<body>
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 设置元素的class属性
$("#conRed").attr("class","red");
$("#conBlue").attr("class","green");
// 给元素添加元素
$("#conRed").addClass("larger");
$("#conRed").addClass("green");
// 设置具体的样式
// 设置一个样式
$("#remove").css("color","chartreuse");
// 同时设置多个
$("#remove").css({"font-weight":700,"height":"200px"});
// 移除样式 （样式名）
$("#conRed").removeClass("larger");
</script>
</html> 3.操作元素的内容
1）比较html()和text()
html()可以识别数据中的html标签并 显示出来；
text()不识别html标签，会当做纯文本显示
取值时，html()能够获取到元素中的html代码，text()只会获取纯文本
表单元素：取值赋值使用 val()
文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、（按钮）等
非表单元素：取值赋值使用 html()和text()
div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作元素的内容</title>
</head>
<body>
<h3><span>html()和 text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" id="uname" value="oop" />
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 获取表单元素的值
var uname = $("#uname").val();
console.log(uname);
// 设置表单元素的值
$("#uname").val("今天天气不错");
var uname2 = $("#uname").val();
console.log(uname2);
// html() 和 text()
// 设置非表单元素的值
$("#html").html("你好");
$("#text").text("你好");
$("#html").html("<h2>你好</h2>");
$("#text").text("<h2>你好</h2>");
// 获取元素的值
var html = $("#html").html();
var txt = $("#html").text();
console.log(html);
console.log(txt);
</script>
</html>4. 创建元素
在jQuery中创建元素很简单，直接使用核心函数即可
$(‘元素内容’)
$(‘<p>this is a paragraph!!!</p>’)5. 添加元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建元素、添加元素</title>
<style type="text/css">
div {
margin: 10px 0px;
}
span{
color: white;
padding: 8px
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
.pink{
background-color: pink;
}
.skyblue {
background-color: skyblue;
}
</style>
</head>
<body>
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="red">不老男神</span>
<span class="blue">偶像</span>
<div class="green" id="person">
<span>小鲜肉</span>
</div>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*创建元素*/
var div = "<div>你好</div>";
console.log(div);
console.log($(div));
/*添加元素*/
// prepend()方法前追加内容
$("#person").prepend("<span>小奶狗</span>");
// prependTo()方法前追加内容
$("<span>小狼狗</span>").prependTo($("#person"));
// append()方法后追加内容
$("#person").append("<span>舔狗</span>");
// appendTo()方法后追加内容
$("<span>老腊肉</span>").appendTo($("#person"));
// 如果追加的元素是已存在的元素，则直接移动到指定元素中
$("#person").append($(".red"));
// before()
$(".blue").before("<span class='pink'>女神</span>");
// after()
$(".blue").after("<span class='skyblue'>歌手</span>");
</script>
</html> 6.删除元素
方法 说明
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty() 清空所选元素的内容
7.遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除元素、遍历元素</title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.pink{
background-color: pink;
}
</style>
</head>
<body>
<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http 协议</span>
<span class="blue">servlet</span>
<br />
<hr />
<span class="pink">jquery</span>
<span class="pink">javase</span>
<span class="pink">http 协议</span>
<span class="pink">servlet</span>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 删除元素
$(".green").remove();
// 清空元素
$(".blue").empty();
// $(selector).each(function(index,element)) :遍历元素
/*$(".pink").each(function(){
console.log(this);
console.log(this.innerHTML);
console.log($(this).html());
});*/
$(".pink").each(function(index,element){
console.log(index);
console.log(element);
console.log($(element).html());
});
</script>
</html>
8.ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){})等价于$(function(){})
ready()加载事件和onload加载事件：
ready()加载事件在dom结构（htm标签）加载完毕后，就执行
onload加载事件在dom结构（htm标签）及引入的外部资源（js文件、css文件等）加载完毕之后才执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ready加载事件</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// JS
window.onload = function() {
console.log("js的预加载事件....");
}
// jquery
$(document).ready(function(){
console.log("jquery的预加载事件....");
console.log($("#mydiv"));
});
$(function(){
console.log("jquery的预加载事件2....");
});
</script>
</head>
<body>
<div id="mydiv">
预加载事件
</div>
</body>
</html> 9.bind()绑定元素事件
1）为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData], handler(eventObject))
2） eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可以包括如下：
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error [, eventData]：传递的参数，格式：{名:值,名 2:值 2}
3） handler(eventObject)：该事件触发执行的函数
4） bind()绑定元素事件三要素：
①确定为哪些元素绑定事件
获取元素
②绑定什么事件（事件类型）
第一个参数：事件的类型
③相应事件触发的，执行的操作
第二个参数：函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
</head>
<body>
姓名：<input type="text" id="uname" />
密码：<input type="text" id="upwd" />
<button id="btn1">按钮1</button>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// js
/*document.getElementById("btn1").onclick = function(){
alert("这是一个点击事件");
}*/
// 得到按钮对象并绑定点击事件
$("#btn1").bind("click",function(){
alert("这是一个点击事件");
});
// 绑定多个事件
// 得到要绑定事件的元素
/*$("#uname").blur(function(){
console.log("失去焦点了...");
});
$("#uname").focus(function(){
console.log("聚焦...");
});*/
$("#uname").blur(function(){
console.log("失去焦点了...");
}).focus(function(){
console.log("聚焦...");
});
// 了解
// 给多个事件绑定同一函数
/*$("#upwd").bind("blur focus",function(){
console.log("....");
});*/
/*$("#upwd").bind("blur",function(){
console.log("....");
}).bind("focus",function(){
console.log("。。。");
});*/
/*$("#upwd").bind({
"blur":function(){
console.log("失焦...");
},
"focus":function(){
console.log("聚焦。。。");
}
});*/
</script>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
