概念:
jQuery = javaScript + Query 通过js代码实现对页面元素的快速查询
write less do More 书写较少的代码,实现更多的功能
jQuery是一款优秀的、快速的、简洁JavaScript框架(代码库)。jQuery的设计宗旨:write less do More。
在它内部封装了JavaScript功能代码,优化HTML文档处理、事件处理和AjAX交互。
javaScript框架: 本质上就是一些js文件,在它内部封装了js的原生代码而已。
// 封装一下根据id获取页面元素的方式 $ 本质就是一个方法对象名字
function $(selector) {
if (selector.startsWith("#")) {
var ele = document.getElementById(selector.substring(1));
return ele;
} else if (selector.startsWith(".")){
var elementsByClassName = document.getElementsByClassName(selector.substring(1));
return elementsByClassName;
} else {
var elementsByTagName = document.getElementsByTagName(selector);
return elementsByTagName;
}
}
<script>
window.onload = function () {
// 获取页面中的input标签元素 id ClassName name TagName
// 通过id的方式来获取的
var input01 = $("#lq");
var input02 = $("#zq");
alert(input01.value);
alert(input02.value);
var inputs = $(".inp01");
alert(inputs[0].value);
alert(inputs[1].value);
// 通过标签选择器来获取页面中的元素
var elementsByTagName = $("input");
alert(elementsByTagName);
}
</script>
<input type="text" value="篮球" id="lq" />
<input type="text" value="足球" id="zq" />
<input type="text" value="乒乓球" class="inp01"/>
<input type="text" value="排球" class="inp01" />
快速入门
- 步骤
- 下载一个jq插件 https://jquery.com/
- 版本介绍:目前市面上有三种版本,优先推荐使用1.xxx
- 压缩版本 juery.min.js(生产版本),体积较小,加载较快和未压缩版本 jquery.js(开发版本)
- 在项目中引入jquery插件,引入到web目录下,在web目录下新建一个js文件,粘贴进去。
- 在页面中通过
jQuery对象和js原生对象的区别与转换
-
获取方式:
- jQuery对象:通过**$(“选择器”)**方式来获取的页面元素
- DOM对象:通过window.document.getElementByXxx()方式获取的。
-
jQuery和js原生的DOM对象中的方法不通用。
-
两者之间可以相互转换
- jq----->dom 方式:jQuery对象[索引],jQuery对象.get(索引)
- dom---->jq 方式:$(dom对象)
-
注意事项:
window.onload = function () { var inputs = document.getElementsByTagName("input");// 对象数组 // 遍历 // of -----> 获取的是对象数组中的每一个对也就是value值 ["小明","小花","小孙","小刘"] for (let input of inputs) { input.value = "棒球"; for (let inputKey in input) { //console.log(inputKey); document.write(inputKey+"<br>"); } } // in -----> 获取的是对象数组中的每一个对象所对应的索引值 ["小明","小花","小孙","小刘"]- -> 0 1 2 3 for (let inputsKey in inputs) { inputs[inputsKey].value = "羽毛球"; } /* for in --> ES5标准 遍历key值 索引 for of --> ES6标准 遍历value值 对象 for of ---> 只能用于数组的遍历 for in ---> 不但可以用于数组的遍历,还可以用于遍历对象中的属性集 */ /* document.write()方法可以用于向页面插入一些内容,浏览器会按照HTML元素的顺序依次解析出来, 并展示 注意:当文档一旦加载完毕, document.write()会覆盖以往的页面内容 也就是浏览器会重写document对象内容。 */ } // 此时不会覆盖 document.write("<hr>"); // 此时会覆盖 window.onload = function () { document.write("<hr>"); }
备注:js中只能通过四种方式来获取页面中的元素document.getElementByXxx(),相对于js原生js来说,jQuery获取页面元素的方式更加灵活,可以借助于css中的选择器来实现。
选择器
-
作用:筛选具有相似特征的元素标签。
-
基本操作:
-
事件绑定:
事件源(标签)+事件名称(具体事件)+监听器(实现的代码)
示例代码:
$("#zq").on("focus",function () { //$("#zq").val("排球"); // this 指代的是当前操作的dom对象 this.value = "羽毛球"; }) $("#zq").on("blur",function () { this.value = "棒球"; }) $("选择器").事件名称(function(){ ........ });
-
页面加载
-
当页面加载的时候需要给事件源绑定事件以及做相关的业务。如果我们用原生js方式:window.onload = function(){},如果我们使用jQuery方式实现页面加载,方式:$(document).ready(function(){});
-
在实际开发中,我们一般使用它的简化版,格式:$(function(){});
-
对比原生js方式区别: window.onload = function(){},如果原生js书写有多个,那么会出现覆盖效果。
但是对于jQuery来说,可以书写多个页面载入函数—>(入口函数)
-
jQuery和原生js在进行页面载入的时候有先后顺序。jQuery加载时机优先于原生js方式。
-
-
样式控制:css()方法---->style
-
单个样式
语法格式: $(“选择器”).css(“属性名”,“属性值”);
-
多个样式
语法格式:$(“选择器”).css({“属性名1”:“属性值1”,“属性名2”:“属性值2”,…});
示例代码:
$(function () { //document.getElementsByTagName("div")[0].style.backgroundColor = "red"; //$("div").get(0).css("background-color","red"); $("#div01").css("background-color","red"); //var css = $("#div01").css("background-color"); //alert(css);// rgb(0,128,0) // 给第二个div设置背景色为灰色。高宽都为500ox,字体大小为30px,字体加粗 $("#div02").css({"backgroundColor":"gray","height":"500px","width":"500px","font-size":"30px", "font-weight":"bolder"}); });
-
-
-
分类
-
五类:
-
第一类:基本选择器:
- id选择器:格式:$("#id值") 获取的是单个标签元素
- class选择器: 格式:$(".class值") 获取的是指定class属性值对应的标签元素
- 标签选择器:格式 :$(“标签名”) 获取的页面中所有匹配的标签元素
- 并集选择器:格式 $(“选择器1”,“选择器2”,…) 获取的是匹配选择器中对应的标签元素
- 交集选择器:格式 $("选择器1"“选择器2”…) 获取的是同时满足多个选择器对应的标签元素
-
层级选择器:
-
后代选择器:格式 $(“选择器1” “选择器2”) 获取选择器1内部的所有选择器2对应的标签元素。
-
子选择器:格式 $(“选择器1” > “选择器2”) 获取选择器1内部的所有选择器2对应的直接子标签元素。
<div id = "one"> <div class = "two"> <div class = "three">aaaa</div> </div> </div> $("#one" > ".two").css() ----> 获取的是 <div class = "two"></div> $("div:even")----> one three $("div:odd")---> two
-
-
属性选择器:表单标签中使用较多
-
属性选择器: $(“标签名[属性名=属性值]”) 获取的就是制定的属性名=属性值对应的标签元素
-
复合属性选择器:
格式:$("标签名[属性名1=属性值1][属性名2=属性值2]....") 获取同时满足多个属性名=属性值对应的标签元素。
-
-
过滤选择器:
- 偶数选择器 格式: :even, 从0开始计数 索引 $(“div:even”)索引 0 2 4 6 8 对应的标签顺序 1 3 5 7 9…
- 奇数选择器 格式: :odd 奇数 从0开始计数 索引 $(“div:odd”) 1 3 5 7…-----> 对应的标签顺序 2 4 6 8…
- 大于索引选择器 格式: :gt(索引值) >
- 小于索引选择器 格式: :lt(索引值) <
- 等于索引选择器 格式 : :eq(索引值) =
-
表单过滤选择器:form
- 可用元素选择器 :格式 :enabled 获取可用 元素
- 不可以元素选择器 格式: :disabled 获取到不可用元素
- 选中元素选择器 格式 : :selected 获取到的下拉列表中的选中的元素
- 选中元素选择器 格式: :checked 获取到的是互斥单选框或者复选框选中的元素。
-
DOM操作
-
内容操作
- html()---->innerHTML 获取元素的内容、设置元素的内容 内容=文本内容/子标签
- text()—>innerText 只能获取到标签的纯文本信息
- val()---->value 获取的是标签的value属性值
-
属性操作
属性:
-
attr():获取指定的属性值,或者设置指定属性的属性值
-
removeAttr():删除属性
-
prop(): 获取与设置属性值
-
removeProp():删除属性
-
attr和prop区别
如果操作的是标签本身的属性建议使用 prop()如果操作的是自定义的属性建议使用 attr()
css类:
-
-
addClass(): 添加class属性值
-
removeClass():删除class属性值
-
toggleClass():切换class属性值 -----> 有就删除掉,没有就添加上
示例代码:
$(function () { //$("div").addClass("div01"); /* $("#inp01").on("click",function () { // dom对象 //this.className = "div01"; $("div").removeClass("div02"); $("div").addClass("div01"); }); $("#inp02").on("click",function () { // dom对象 //this.className = "div02"; $("div").removeClass("div01"); $("div").addClass("div02"); });*/ // toggleClass() 有就删除掉class属性值 没有就添加class属性值 $("#inp01").on("click",function () { $("div").toggleClass("div01");// 开关技术 }); });
-
-
节点操作:CRUD操作
-
添加节点
-
append() :通过父元素将子元素添加到父元素内部的末尾
格式: 父元素对象(jQuery).append(子元素对象):将子元素对象添加到父元素对象的内部,位置在末尾
-
prepend(): 通过父元素将子元素添加到父元素内部的头部
格式: 父元素对象(jQuery).prepend(子元素对象):将子元素对象添加到父元素对象的内部,位置在头部
-
appendTo():通过子元素将自己添加到父元素内部,并且位置在末尾
格式: 子元素对象.appendTo(父元素对象):将子元素自己添加到父元素内部,位置在末尾
-
prependTo():通过子元素将自己添加到父元素内部,并且位置在头部
格式:子元素对象.prependTo(父元素对象):将子元素自己添加到父元素内部,位置在头部
-
after():添加元素到指定元素的后边
格式: 对象1.after(对象2)----> 将对象2放到对象1的后边,对象1和对象2是同级关系–>兄弟关系
-
before():添加元素到指定元素的前边
格式: 对象1.before(对象2)---->将对象2添加到对象1的前边 对象1和对象2是同级关系–>兄弟关系
-
-
删除节点
-
remove() 删除元素
格式: 对象.remove(): ---->将此对象删除掉
-
empty():清空元素的所有后代元素
格式: 对象.empty(): ----> 将此对象的所有后代元素全部清空。但是保留当前自己对象以及属性节点。
-
-
修改节点
-
查询节点
-
this用法
如果在调用方法时需要获取标签元素本身,在方法上设定参数为this,此时this表示是当前标签
- 对于标签添加onclick后者onmouse方法的时候,如果方法在
<input type="button" id="btn01" value="添加人工智能专业" onclick="clickBtn(this)"> <input type="button" id="btn02" value="添加大数据专业" onclick="clickBtn2()"> <input type="button" id="btn03" value="点我" /> <script> function clickBtn(obj) { alert(obj);// [object HTMLInputElement] 元素本身 } function clickBtn2() { alert(this);// window对象 } $("#btn03").on("click",function () { alert(this);// [object HTMLInputElement] 元素本身 }) </script>
serialize()
概念:序列化 此时在jQuery中针对的是表单提交。
通过这个方法一次性获取到表单中所有的值,生成一个字符串 格式:username=zhangsan&password=123456&age=18&…
<form action="自定义js框架-01.html" id = "formId" method="post" οnsubmit="return commitData()" > 姓名:<input type="text" name="username" placeholder="姓名"> 密码:<input type="password" name="password" placeholder="密码"> 年龄:<input type="text" name="age" placeholder="年龄"> 地址:<input type="text" name="address" placeholder="地址"> 日期:<input type="date" name="birthday"/> <input id="btn01" type="button" value="提交"> <!--<button type="submit"></button> 默认值是submit IE浏览器是button --> </form> <script> /* function commitData() { alert($("#formId").serialize());// 序列化 return true;// 返回值为false 阻止提交 }*/ $("#btn01").on("click",function () { var jQuery = $("#formId").serialize(); document.write(jQuery); $("#btn01").submit();// 手动提交数据 }); </script>
-