1. jQuery的使用
在需要使用jquery的页面引入jquery的核心js文件
<script src="../js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>2. Dom对象 与 Jquery包装集对象
- Dom对象
- 通过js方式获取的元素对象（document）
- Jquery对象
- 通过jquery方法获取的元素对象，返回的是jquery包装集
/* Dom对象 */
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("==========");
/* Jquery对象 */
// 通过id选择获取元素对象 $("#id属性值")
var divJquery = $("#mydiv");
console.log(divJquery);
// jquery获取不存在的元素
var spanJquery = $("#myspan");
console.log(spanJquery);
console.log("========");
/* Dom对象 转 Jquery对象 */
// Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var divDomToJquery = $(divDom);
console.log(divDomToJquery);
/* Jquery对象 转 Dom对象 */
// 获取包装集对象中指定下标的元素，将jquery对象转换成dom对象
var divJqueryToDom = divJquery[0];
console.log(divJqueryToDom);3. 基础选择器
- id选择器
- #id属性值
- $("#id属性值")
- 选择id为指定值的元素对象（如果有多个同名id，则以第一个为准）
- 类选择器
- .class属性值
- $(".class属性值")
- 选择class为指定值的元素对象
- 元素选择器
- 标签名/元素名
- $("标签名/元素名")
- 选择所有指定标签的元素对象
- 通用选择器
- *
- $("*")
- 选择页面中所有的元素对象
- 组合选择器
- 选择器1,选择器2,..
- $("选择器1,选择器2,..")
- 选择指定选择器选中的元素对象
// id选择器 #id属性值
var mydiv = $("#mydiv1");
console.log(mydiv);
// 类选择器 .class属性值
var clas = $(".blue");
console.log(clas);
// 元素选择器 标签名/元素名
var spans = $("span");
console.log(spans);
// 通用选择器 *
var all = $("*");
console.log(all);
// 组合选择器 选择器1,选择器2,..
var group = $("#mydiv1,div,.blue");
console.log(group);4. 层次选择器
- 后代选择器
- 格式： 父元素 指定元素 （空格隔开）
- 示例： $("父元素 指定元素")
- 选择父元素的所有指定元素（包含第一代、第二代等）
- 子代选择器
- 格式： 父元素 > 指定元素 （大于号隔开）
- 示例： $("父元素 > 指定元素")
- 选择父元素的所有第一代指定元素
- 相邻选择器
- 格式： 元素 + 指定元素 （加号隔开）
- 示例： $("元素 + 指定元素")
- 选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）
- 同辈选择器
- 格式： 元素 ~ 指定元素 （波浪号隔开）
- 示例： $("元素 ~ 指定元素")
- 选择元素的下面的所有指定元素
// 后代选择器
var hd = $("#parent div");
console.log(hd);
// 子代选择器
var zd = $("#parent > div");
console.log(zd);
// 相邻选择器
var xl = $("#child + div");
console.log(xl);
// 同辈选择器
var imgs = $(".gray ~ img");
console.log(imgs);5. 表单选择器
- 表单选择器：input 查找所有的input元素：$(":input")；
- 文本框选择器：text
- 密码框选择器：password
- 单选按钮选择器：radio
- 多选按钮选择器：checkbox
- 提交按钮选择器：sunmit
- 图像按钮选择器：image
- 重置按钮选择器：reset
- 文件域选择器：file
- 按钮选择器：button
注意：会匹配所有的input、textarea、select和button元素。
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()方法。
/* 获取属性 */
// 固有属性
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")7. 操作元素的样式
- attr("class")：获取元素的样式名
- attr("class","样式名")：设置元素的样式 （设置样式，原本的样式会被覆盖）
- addClass("样式名")：添加样式 （在原来的样式基础上添加样式，原本的样式会保留，如果出现相同样式，则以样式中后定义的为准）
- css()：添加具体的样式（添加行内样式）
- css("具体样式名","样式值"); 设置单个样式
- css({"具体样式名":"样式值","具体样式名":"样式值"}); 设置多个样式
- removeClass("样式名")：移除样式
// 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");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等
// 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("今天天气不错");9. 创建元素和添加元素
创建元素
- $("内容")
添加元素
- 1. 前追加子元素
- 指定元素.prepend(内容)
- 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。
- $(内容).prependTo(指定元素);
- 把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。
- 指定元素.prepend(内容)
- 2. 后追加子元素
- 指定元素.append(内容)
- 在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。
- $(内容).appendTo(指定元素);
- 把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。
- 指定元素.append(内容)
- 3. 前追加同级元素
- before()
- 在指定元素的前面追加内容
- before()
- 4. 后追加同级元素
- after()
- 在指定元素的后面追加内容
- after()
// 创建元素
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);10. 删除元素
- remove()
- 删除元素及其对应的子元素，标签和内容一起删除
- 指定元素.remove();
- empty()
- 清空元素内容，保留标签
- 指定元素.empty();
// 删除元素
$(".green").remove();
// 清空元素
$(".blue").empty();11. 遍历元素
each()
- $(selector).each(function(index,element)) :遍历元素
- 参数 function 为遍历时的回调函数，
- index 为遍历元素的序列号，从 0 开始。
- element是当前的元素，此时是dom元素。
// 获取指定元素 并遍历
$(".green").each(function(index,element){
console.log(index);
console.log(element);
console.log(this);
console.log($(this));
});12. ready加载事件
ready加载事件
- 预加载事件
- 当页面的dom结构加载完毕后执行
- 类似于js中load事件
- ready事件可以写多个
语法：
$(document).ready(function(){
});简写：
$(function(){
});13. 绑定事件
bind绑定事件
- 为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
- 语法：
- $(selector).bind( eventType [, eventData], handler(eventObject));
- eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
- [, eventData]：传递的参数，格式：{名:值,名2:值2}
- handler(eventObject)：该事件触发执行的函数
- 绑定单个事件
- bind绑定
- $("元素").bind("事件类型",fucntion(){});
- 直接绑定
- $("元素").事件名(function(){});
- bind绑定
- 绑定多个事件
- bind绑定
- 1. 同时为多个事件绑定同一个函数
- 指定元素.bind("事件类型1 事件类型1 ..",function(){});
- 2. 为元素绑定多个事件，并设置对应的函数
- 指定元素.bind("事件类型",function(){}).bind("事件类型",function(){});
- 3. 为元素绑定多个事件，并设置对应的函数
- 指定元素.bind({"事件类型":function(){},"事件类型":function(){}});
- 1. 同时为多个事件绑定同一个函数
- 直接绑定
- 指定元素.事件名(function(){}).事件名(function(){});
- bind绑定
/*
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移开了...");
});
4018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
