概念：
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> -
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
