1. jQuery的使用
在需要使用jquery的页面引入jquery核心js文件
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
2. Dom对象 与 Jquery包装集对象
2.1 Dom对象
通过js方式获取的元素对象（document）
var divDom = document.getElementById("mydiv");
console.log(divDom);
var divsDom = document.getElementsByTagName("div");
console.log(divsDom); // js获取不存在的元素
var spanDom = document.getElementsByTagName("span");
console.log(spanDom);
var spanDom2 = document.getElementById("myspan");
console.log(spanDom2);
console.log("==========");2.2 jquery对象
通过jquery方法获取的元素对象，返回的使jquery包装集
// 通过id选择获取元素对象 $("#id属性值")
var divJquery = $("#mydiv");
console.log(divJquery); // jquery获取不存在的元素
var spanJquery = $("#myspan");
console.log(spanJquery);2.3 DOM对象转jquery对象
// Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var divDomToJquery = $(divDom);
console.log(divDomToJquery);2.4 Jquery对象 转 Dom对象
// 获取包装集对象中指定下标的元素，将jquery对象转换成dom对象
var divJqueryToDom = divJquery[0];
console.log(divJqueryToDom);3. 基础选择器
3.1 id选择器
var mydiv = $("#mydiv1");
console.log(mydiv);3.2 类选择器
var clas = $(".blue");
console.log(clas);3.3 元素选择器
var spans = $("span");
console.log(spans);3.4 通用选择器
var all = $("*");
console.log(all);3.5 组合选择器
var group = $("#mydiv1,div,.blue");
console.log(group);4. 层次选择器
4.1 后代选择器
格式： 父元素 指定元素 （空格隔开）
示例： $("父元素 指定元素")
选择父元素的所有指定元素（包含第一代、第二代等）
// 后代选择器
var hd = $("#parent div");
console.log(hd);4.2 子代选择器
格式： 父元素 > 指定元素 （大于号隔开）
示例： $("父元素 > 指定元素")
选择父元素的所有第一代指定元素
// 子代选择器
var zd = $("#parent > div");
console.log(zd);4.3 相邻选择器
格式： 元素 + 指定元素 （加号隔开）
示例： $("元素 + 指定元素")
选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）
// 相邻选择器
var xl = $("#child + div");
console.log(xl);4.4 同辈选择器
格式： 元素 ~ 指定元素 （波浪号隔开）
示例： $("元素 ~ 指定元素")
选择元素的下面的所有指定元素
// 同辈选择器
var imgs = $(".gray ~ img");
console.log(imgs);5.表单选择器
表单选择器 :input 查找所有的input元素：$(":input")；
注意：会匹配所有的input、textarea、select和button元素。
文本框选择器 :text
密码框选择器 :password
单选按钮选择器 :radio
多选按钮选择器 :checkbox
提交按钮选择器 :sunmit
图像按钮选择器 :image
重置按钮选择器 :reset
文件域选择器 :file
按钮选择器 :button
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 表单选择器 :input
var inputs = $(":input");
console.log(inputs);
// 元素选择器
var inputs2 = $("input");
console.log(inputs2);6.操作元素的属性
操作元素的属性
属性的分类：
固有属性：元素本身就有的属性（id、name、class、style）
返回值是boolean的属性：checked、selected、disabled
自定义属性：用户自己定义的属性
attr()和prop()的区别：
1. 如果是固有属性，attr()和prop()方法均可操作
2. 如果是自定义属性，attr()可操作，prop()不可操作
3. 如果是返回值是boolean类型的属性
若设置了属性，attr()返回具体的值，prop()返回true；
若未设置属性，attr()返回undefined，prop()返回false；
1. 获取属性
attr("属性名")
prop("属性名")
2. 设置属性
attr("属性名","属性值")
prop("属性名","属性值")
3. 移除属性
removeAttr("属性名")
总结：
如果属性的类型是boolean（checked、selected、disabled），则使用prop()方法；否则使用attr()方法。
<input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc" /> aa
<input type="checkbox" name="ch" id="bb" /> bb
</body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 获取属性 */
// 固有属性
var name = $("#aa").attr("name");
console.log(name);
var name2 = $("#aa").prop("name");
console.log(name2);
// 返回值是boolean的属性（元素设置了属性）
var ck1 = $("#aa").attr("checked"); // checked
var ck2 = $("#aa").prop("checked"); // true
console.log(ck1);
console.log(ck2);
// 返回值是boolean的属性（元素未设置属性）
var ck3 = $("#bb").attr("checked"); // undefined
var ck4 = $("#bb").prop("checked"); // false
console.log(ck3);
console.log(ck4);
// 自定义属性
var abc1 = $("#aa").attr("abc"); // aabbcc
var abc2 = $("#aa").prop("abc"); // undefined
console.log(abc1);
console.log(abc2);
/* 设置属性 */
// 固有属性
$("#aa").attr("value", "1");
$("#bb").prop("value", "2");
// 返回值是boolean的属性
$("#bb").attr("checked", "checked");
$("#bb").prop("checked", false);
// 自定义属性
$("#aa").attr("uname", "admin");
$("#aa").prop("uage", 18);
/* 移除属性 */
$("#aa").removeAttr("checked")
</script>7.操作元素的样式
操作元素的样式
attr("class") 获取元素的样式名
attr("class","样式名") 设置元素的样式 （设置样式，原本的样式会被覆盖）
addClass("样式名") 添加样式 （在原来的样式基础上添加样式，原本的样式会保留，如果出现相同样式，则以样式中后定义的为准）
css() 添加具体的样式（添加行内样式）
css("具体样式名","样式值"); 设置单个样式
css({"具体样式名":"样式值","具体样式名":"样式值"}); 设置多个样式
removeClass("样式名") 移除样式
<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.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// attr("class") 获取元素的样式名
var cla = $("#conBlue").attr("class");
console.log(cla);
// attr("class","样式名") 设置元素的样式
$("#conBlue").attr("class", "green");
// addClass("样式名") 添加样式
$("#conBlue").addClass("larger");
$("#conBlue").addClass("pink");
// css() 添加具体的样式（添加行内样式）
$("#conRed").css("font-size", "40px");
$("#conRed").css({ "font-family": "楷体", "color": "green" });
// removeClass("样式名") 移除样式
$("#remove").removeClass("larger");
</script>8. 操作元素的内容
操作元素的内容
html() 获取元素的内容，包含html标签（非表单元素）
html("内容") 设置元素的内容，包含html标签（非表单元素）
text() 获取元素的纯文本内容，不识别HTML标签（非表单元素）
text("内容") 设置元素的纯文本内容，不识别HTML标签（非表单元素）
val() 获取元素的值（表单元素）
val("值") 设置元素的值（表单元素）
表单元素：
文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
非表单元素：
div、span、h1~h6、table、tr、td、li、p等
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// html("内容") 设置元素的内容，包含html标签（非表单元素）
$("#html").html("<h2>上海</h2>");
$("#html2").html("上海");
// html() 获取元素的内容，包含html标签（非表单元素）
var html = $("#html").html();
var html2 = $("#html2").html();
console.log(html);
console.log(html2);
// text("内容") 设置元素的纯文本内容，不识别HTML标签（非表单元素）
//$("#text").text("北京");
//$("#text2").text("<h2>北京</h2>");
// text() 获取元素的纯文本内容，不识别HTML标签（非表单元素）
var txt = $("#text").text();
var txt2 = $("#text2").text();
console.log(txt);
console.log(txt2);
// val() 获取元素的值（表单元素）
var val = $("#op").val();
console.log(val);
// val("值") 设置元素的值（表单元素）
$("#op").val("今天天气不错");
</script>9. 创建元素和添加元素
创建元素和添加元素
创建元素
$("内容")
添加元素
1. 前追加子元素
指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。
$(内容).prependTo(指定元素); 把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。
2. 后追加子元素
指定元素.append(内容) 在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。
$(内容).appendTo(指定元素); 把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。
3. 前追加同级元素
before() 在指定元素的前面追加内容
4. 后追加同级元素
after() 在指定元素的后面追加内容
<body>
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
<span>小鲜肉</span>
</div>
</body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 创建元素
var p = "<p>这是一个p标签</p>";
console.log(p);
console.log($(p));
/* 添加元素 */
// 创建元素
var span = "<span>小奶狗</span>";
// 得到指定元素，并在元素的内部最前面追加内容
$(".green").prepend(span);
var span2 = "<span>小狼狗</span>";
$(span2).prependTo($(".green"));
var span3 = "<span>小奶狗1</span>";
var span4 = "<span>小奶狗2</span>";
$(".green").append(span3);
$(span4).appendTo($(".green"));
// 将已存在内容追加到指定元素中
$(".green").append($(".red"));
/* 同级追加 */
var sp1 = "<span class='pink'>女神</span>";
var sp2 = "<span class='gray'>歌手</span>";
$(".blue").before(sp1);
$(".blue").after(sp2);
</script>10. 删除元素
删除元素
remove()
删除元素及其对应的子元素，标签和内容一起删除
指定元素.remove();
empty()
清空元素内容，保留标签
指定元素.empty();
<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>
</body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 删除元素
$(".green").remove();
// 清空元素
$(".blue").empty();
</script>11. 遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
<body>
<h3>遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
</body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 获取指定元素 并遍历
$(".green").each(function (index, element) {
console.log(index);
console.log(element);
console.log(this);
console.log($(this));
});
</script>12. ready加载事件
ready加载事件
预加载事件
当页面的dom结构加载完毕后执行
类似于js中load事件
ready事件可以写多个
语法：
$(document).ready(function(){
});
简写：
$(function(){
});
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
console.log("ready加载事件...");
});
$(document).ready(function () {
// 获取元素
console.log($("#p1"));
});
</script>13. 绑定事件
绑定事件
bind绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
语法：
$(selector).bind( eventType [, eventData], handler(eventObject));
eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执行的函数
绑定单个事件
bind绑定
$("元素").bind("事件类型",fucntion(){
});
直接绑定
$("元素").事件名(function(){
});
绑定多个事件
bind绑定
1. 同时为多个事件绑定同一个函数
指定元素.bind("事件类型1 事件类型1 ..",function(){
});
2. 为元素绑定多个事件，并设置对应的函数
指定元素.bind("事件类型",function(){
}).bind("事件类型",function(){
});
3. 为元素绑定多个事件，并设置对应的函数
指定元素.bind({
"事件类型":function(){
},
"事件类型":function(){
}
});
直接绑定
指定元素.事件名(function(){
}).事件名(function(){
});
<body>
<h3>bind()方简单的绑定事件</h3>
<!-- style="cursor:pointer" 设置鼠标图标 -->
<div id="test" style="cursor:pointer">点击查看名言</div>
<input id="btntest" type="button" value="点击就不可用了" />
<hr>
<button type="button" id="btn1">按钮1</button>
<button type="button" id="btn2">按钮2</button>
<button type="button" id="btn3">按钮3</button>
<button type="button" id="btn4">按钮4</button>
</body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
* */
/* 绑定单个事件 */
$("#test").bind("click", function () {
console.log("世上无难事，只怕有心人");
});
// 原生js绑定事件
/* document.getElementById("test").onclick = function(){
console.log("test...");
} */
// 直接绑定
$("#btntest").click(function () {
// 禁用按钮
console.log(this);
$(this).prop("disabled", true);
});
/* 绑定多个事件 */
// 1. 同时为多个事件绑定同一个函数
$("#btn1").bind("click mouseout", function () {
console.log("按钮1...");
});
// 2. 为元素绑定多个事件，并设置对应的函数
$("#btn2").bind("click", function () {
console.log("按钮2被点击了...");
}).bind("mouseout", function () {
console.log("按钮2移开了...");
});
// 3. 为元素绑定多个事件，并设置对应的函数
$("#btn3").bind({
"click": function () {
console.log("按钮3被点击了...");
},
"mouseout": function () {
console.log("按钮3移开了...");
}
});
// 直接绑定
$("#btn4").click(function () {
console.log("按钮4被点击了...");
}).mouseout(function () {
console.log("按钮4移开了...");
});
</script>
53
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
