概念
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" />
快速入门
? 步骤
1.下载一个jq插件 https://jqery.com/
2.版本介绍:目前市面上有三种版本,优先推荐使用1.xxx系列版本
3.压缩版本(juery.min.js生产版本)体积较小 加载较快 和 未压缩版本(juery.js开发版本)
4.在项目中引入jquery插件,引入到web目录下在web目录下新建一个js文件夹,粘贴进去
5.在页面中通过<script src = "jquery路径">
jquery对象和js原生对象的区别于转换
? 获取方式不一样:
○ jQuery对象:通过$("选择器")方式来获取的页面元素
○ DOM对象:通过window.document.getElementByXxx()方式来获取的
? jQuery和js原生的DOM对象中的方法不通用.
? 两者之间可以相互转换
○ jQuery--->dom 方式:jquery对象[索引],jquery对象.get(索引)
○ dom--->jQuery 方式:$(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":"属性值2";"属性名1":"属性值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"});
});
? 分类
○ 五类:
○ 第一类基本选择器:
1.id选择器:格式:$(#id值) 获取的是单个标签元素
2.class选择器:格式$(.class值)获取指定的class属性值对应的标签元素
3.标签选择器:格式$(标签名)获取的时候页面中所有匹配的标签
4.并集选择器:格式$("选择器1","选择器2",…)获取的是匹配选择其中对应的标签元素
5.交集选择器:格式${"选择器1""选择器2"…}获取的是匹同时满足多个选择器对应的标签元素
○ 第二类层级选择器:
1.后代选择器:格式$("选择器1" "选择器2")获取选择器1内部的所有选择器对应的标签元素
2.子选择器:格式${"选择器1">"选择器2"}获取选择器1内部的所有选择器2对应的直接子标签元素
<div id = "one">
<div class = "two">
<div class = "two">aaa</div>
</div>
</div>
$("#one">".two") ---> 获取的是 直接子元素 空格都可以设置
<div class = "two">
//获取不到<div class = "two">aaa</div>
</div>
$("div:even")----> one twoaaa
$("div:odd")----> two
○ 第三类属性选择器:表单标签中使用较多
1.属性选择器:格式:$("标签名[属性名=属性值]");获取的就是指定的属性名=属性值对应的标签元素
2.复合属性选择器:格式:$("标签名[属性名=属性值][属性名=属性值]……") 获取同时满足多个属性名=属性值对应的标签元素.
○ 第四类过滤选择器:
1.偶数选择器:格式: :even,从0开始计数 索引 $("div:even") 索引0 2 4 6 8 --->对应的标签顺序 1 3 5 7 9……
2.奇数选择器:格式: :odd 奇数 从0开始计数 索引 $(div:odd)索引1 3 5 7 ---> 对应的标签顺序 2 4 6 8 ……
3.大于索引选择器:格式:gt(索引值) >
4.小于索引选择器:格式:lt(索引值) <
5.等于索引选择器:格式:eq(索引值) =
○ 第五类表单过滤选择器:
1.可用元素选择器:格式: :enabled 获取可用元素
2.不可用元素选择器格式: :disable 获取到不可用元素
3.选中元素选择器格式: :selected 获取到的是下拉列表中选中的元素
4.选中元素选择器格式: :checked 获取到的是互斥单选框或者复选框选中的元素
DOM操作
? 内容操作
1.html()--->innerHtml 可以获取元素的内容,设置元素的内容 内容 = 文本内容/子标签
2.text()--->innerTest 只能获取到标签的纯文本信息
3.val()--->value 获取的是标签的value属性值
? 属性操作
属性
1.attr():获取指定的属性值,或者设置指定属性的属性值
2.remove():把属性删除掉
3.prop();获取与设置属性值
4.removeProp:删除属性值
attr和poop区别
§ 如果操作标签本身的属性建议使用prop
§ 如果操作的是自定义的属性,建议使用attr
css类
1.addClass();添加class属性值
2.removeClass():删除class属性值
3.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
1.添加节点
○ append():通过父元素将子元素添加到父元素内部的末尾
格式:父元素对象(jQuery).append(子元素对象):将子元素对象添加到父元素对象内的末尾
○ prepend();通过父元素将子元素添加到父元素的头部
格式:父元素对象(jQuery).prepend(子元素对象):将子元素对象添加到父元素对象内的头部
○ appendTo():通过子元素将自己添加到父元素内部并且位置在末尾
格式:子元素对象.appendTo(父元素对象):将子元素自己添加到父元素内部并且位置在末尾
○ prependTo():用过子元素将自己添加到父元素的内部,位置在头部
格式:子元素对象.prependTo(父元素对象):将子元素自己添加到父元素内部并且位置在头部
○ after();添加元素到指定元素的后面
格式:对象1.after(对象2)--->将对象2放到对象1的后面,对象1和对象2是统计关系(兄弟关系)
○ before();添加元素到指定元素的前面--->添加元素到指定元素的前面
格式:对象1.after(对象2)--->将对象2放到对象1的前面,对象1和对象2是统计关系(兄弟关系)
2.删除节点
○ remove()删除元素
格式:对象.remove();--->将此对象删除掉
○ empty();清空元素的所有后代元素
格式:对象.empty();--->将此对象的所有后代元素全部清空,但是保留当前自己对象以及属性节点
3.修改节点
4.查询节点
this用法
如果在调用方法时,需要获取标签元素本身,可以在方法上设定参数为this,此时this表示是当前标签
? 对于标签添加onclick或者onmouse方法的时候,如果方法在<script>标签中直接定义的,那么在方法中获取的this指代的是当前窗口对象window,
并不会指代当前对象本身.所以如果需要的话,直接在方法定义的时候直接使用this作为参数传递
? 如果在js中获取到了某个标签,然后给其绑定某个事件,对应的方法,此方法中的this指代的是这个对象本身
<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=张三&password=123456&age=18&……
原文：https://www.cnblogs.com/shangjinshuai/p/14293970.html