目录
1jQuery概述
1.1简介
jQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。
特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。
jQuery的底层是javascript , 基本上 我们能想到的操作 全部被封装了, jQuery 封装了javascript , css , html
1.2自定义js框架
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义js框架</title>
</head>
<body>
<div id="myDiv">世界上最遥远的距离不是生与死，而是你亲手制造的BUG就在你眼前，你却怎么都找不到她。</div>
<script>
//定义方法快速获得数据
function jQuery(id){
return document.getElementById(id);
}
//使用$ 替代jQuery方法名称
$=jQuery;
</script>
<script>
//获得div对象
//let divObj = document.getElementById("myDiv");
//let divObj = jQuery("myDiv");
let divObj = $("myDiv");
console.log(divObj);
</script>
</body>
</html>2jQuery基础语法
2.1引入jQuery
<script src="../js/jquery-3.2.1.js"></script>
2.2jQuery与js的区别
Query虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。
通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。两者的关系与区别总结如下：
1. jQuery对象与js对象相互转换,jquery对象和js对象的属性和方法不能通用
js对象-->jquery对象:$(js对象)
jquery对象-->js对象:
方式1: jquery对象[索引]
方式2: jquery对象.get(索引)
2. 页面加载事件
$(function(){
//操作
})
注意:一个页面中可以出现多个jquery的页面加载事件且都生效,但是js的onload只能有一个生效
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq与js对象相互转换</title>
<!--引入jquery-->
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>
<script>
// 通过js方式修改文本内容
let myDivDom = document.getElementById("myDiv");
console.log(myDivDom.innerHTML);
myDivDom.innerHTML="<a href=''>百度一下</a>";
/**
* jquery的语法: 一个方法两个用途
* jquery对象.html() 获得数据
* jquery对象.html(内容) 赋值数据
*/
// 通过jq方式修改文本内容
let $myDiv = $("#myDiv");
console.log( $myDiv.html() );
$myDiv.html("<a href=''>京东</a>")
// js对象和jq对象的：属性和方法不同通用
//myDivDom 希望jQuery对象的语法 dom->jquery 转换 $(dom对象)
console.log( $(myDivDom).html() );
/**
* jquery的底层 实际上是一个数组 存放着一个一个的dom成员
* 从数组中将这些dom成员取出来即可
* 语法方式:
* 1. jquery.get(索引)
* 2. jquery[索引]
* 从jquery数组获得出来的对象 自动转换成dom对象
*/
//jquery对象->dom对象
console.log( $myDiv.get(0).innerHTML );
console.log( $myDiv[0].innerHTML );
</script>
</body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面加载事件</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
/*alert(1);
//页面加载函数: 加载完页面才执行代码
//dom原生页面加载只能有一个
window.onload=function(){
alert("x")
}
window.onload=function(){
alert("y")
}
alert(2)*/
</script>
<script>
/**
* $(dom对象)
* 页面加载有两种方式 , jquery中常用匿名函数
* 1.$(document).ready( function(){ 代码 })
* 2.$(function(){}) 简写(个人常用)
* 页面加载函数可以有多个 , 加载顺序是自上而下
*/
alert(1)
$(document).ready(function(){
alert(3);
})
$(function(){
alert(4)
})
alert(2)
</script>
</head>
<body>
</body>
</html>3jQuery选择器
3.1基本选择器
1. 标签（元素）选择器
* 语法：$("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法：$("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>
<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
<span id="boss">灭霸</span>
<script>
//jquery.css(样式key , 样式的值)
// 1.获取span标签的jquery对象
console.log($("span"));
//$("span").css("color" , "red");
// 2.获取class有hero的jquery对象
//$(".hero").css("color" , "red");
// 3.获得id="boss"的jquery对象
$("#boss").css("color" , "red");
</script>
</body>
</html>3.2层级关系选择器
1. 后代和子代选择器
* 语法：$("A B") 选择A元素内部的所有B元素
* 语法：$("A>B") 选择A元素内部的所有B儿子
2. 并集选择器
* 语法：$("选择器1,选择器2....") 获取多个选择器选中的所有元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>层级关系选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="kangxi">
<span>儿子：雍正</span>
<b>
<span>孙子：乾隆</span>
</b>
</div>
<p>牛顿</p>
<p>贝多芬</p>
<script>
//空格后代选择器 >表示子代选择器
// 1. 获取所有的p,span的文本
$("p,span").css("color" , "red");
// 2. 获取div的后代span的文本
$("div span").css("color" , "red");
$("div>span").css("color" , "red");
//同级标签的后一个元素
$("#kangxi+p").css("color" , "red");
//同级标签的后面所有元素
$("#kangxi~p").css("color" , "red");
</script>
</body>
</html>3.3属性选择器
1. 属性选择器
* 语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器
2. 复合属性选择器
* 语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器
[attribute] :有属性
[attribute=value] :有属性且值相同
[attribute!=value] :有属性且值不相同
[attribute^=value] :有属性且值以指定内容开头
[attribute$=value] :有属性且值以指定内容结尾
[attribute*=value] :有属性且值包含指定内容
[attrSel1][attrSel2][attrSelN] :包含多个指定的属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" name="username" abc value="用户名"/><br/>
<input type="text" name="nickname" value="昵称"/><br/>
<script>
//input[属性=属性名称][属性=属性名称][属性=属性名称]
// 1.获取type='text'的input标签
$("input[type='text']").css("backgroundColor" , "red");
// 2.获取type='text' 且 name="nickname" 的input标签
$("input[type='text'][name='nickname']").css("backgroundColor" , "red");
//在jquery中 表达式任意书写 只要能完成功能即可
$("input[name='nickname']").css("backgroundColor" , "red");
$("[name='nickname']").css("backgroundColor" , "red");
//含有属性即可
$("input[abc]").css("backgroundColor" , "red");
$("input[name!='username']").css("backgroundColor" , "red");
$("input[name^='user']").css("backgroundColor" , "red");
$("input[name$='kname']").css("backgroundColor" , "red");
$("input[name*='name']").css("backgroundColor" , "red");
</script>
</body>
</html>3.4基本过滤选择器
1. 首元素选择器
* 语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素3. 偶数选择器
* 语法： :even 偶数，从 0 开始计数
4. 奇数选择器
* 语法： :odd 奇数，从 0 开始计数5. 指定索引选择器
* 语法： :eq(index) 指定索引元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
<li>大娃（红娃）</li>
<li>二娃（橙娃）</li>
<li>三娃（黄娃）</li>
<li class="xxx">四娃（绿娃）</li>
<li>五娃（青娃）</li>
<li>六娃（蓝娃）</li>
<li>七娃（紫娃）</li>
</ul>
<script>
//基本过滤选择器: 一般情况下在一个数组的基础上进行操作
//first 表示第一个 :last最后 not(选择器) 排除
// 所有选择器可以互选嵌套
// 1.获取第一个元素
$("li:first").css("color" , "red");
$("li:last").css("color" , "red");
$("li:not(.xxx)").css("color" , "red");
// 2.获取偶数索引元素
//even 偶数 odd奇数
$("li:even").css("color" , "red");
$("li:odd").css("color" , "red");
// 3.获取指定索引2的元素
//eq 等于 gt 大于 lt小于
$("li:eq(2)").css("color", "red");
$("li:lt(2)").css("color", "red");
</script>
</body>
</html>3.5对象遍历
* 语法：
jq对象.each(function(index,element){
//index 就是索引
//element 就是被遍历到的当前的js对象
//this 就是被遍历到的当前的js对象
});
全局遍历：
$.each(要遍历的对象,function(){
});
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>对象遍历</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
jquery对象的遍历
$.each() 用法示例
-->
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
<script>
//获得所有的li值
//let $liObj = $("li");
/*for(let i = 0 ; i <$liObj.length ; i ++ ){
//获得每一个数据 从数组中获取出来的是dom对象
//console.log( $($liObj[i]).html() );
console.log( $liObj[i].innerHTML );
}*/
//1.对象遍历
$("li").each(function(index , element){
console.log( index + "@@" + element.innerHTML )
});
$("li").each(function(index , element){
//this 是当前正在被遍历的元素 等效 element
console.log( index + "@@" + element.innerHTML + "@@" + this.innerHTML ) ; //$(this)
});
//2.全局遍历
$.each( $("li") , function(index , element){
console.log( index + "@@" + element.innerHTML + "@@" + this.innerHTML ) ;
})
</script>
</body>
</html>4jQuery的DOM操作
4.1jQuery操作内容
1. text(): 获取/设置元素的标签体纯文本内容
* 相当于js： innerText属性
jquery对象.text():获取
jquery对象.text("内容"):设置
2. html(): 获取/设置元素的标签体超文本内容
* 相当于js： innerHTML属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作内容</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv"><p>天王盖地虎</p></div>
<script>
/**
* innerText: 会覆盖 遇到标签 当作文本解析 -> text()
* innerHTML: 会覆盖 遇到标签 会解析成标签 -> html()
* jquery 一个方法 两个用途
* text([参数]) 赋值和取值
* 取值: 只能取文本 忽略标签
* 赋值: 覆盖内容, 并且当作文本解析
* html([参数])赋值和取值
* 取值: 获得标签和文本
* 赋值: 覆盖内容 html代码会被解析
*/
// 1.text()操作内容
console.log( $("#myDiv").text() );
$("#myDiv").text("<a href=''>百度一下</a>")
// 2.html()操作内容
console.log( $("#myDiv").html() );
$("#myDiv").html("<a href=''>百度一下</a>")
</script>
</body>
</html>4.2jQuery操作属性
1. val()： 获取/设置元素的value属性值
* 相当于：js对象.value
2. attr(): 获取/设置元素的属性
attr("属性名","值"):设置自定义属性
attr("属性名"):获取自定义属性的值
removeAttr("属性名"):删除属性
* 相当于：js对象.setAttribute() / js对象.getAttribute()
3. prop():获取/设置元素的属性
removeProp() 删除属性//不好使 用removeAttr();
jq在1.6版本之后，提供另一组API prop 通常处理属性值为布尔类型操作
例如：checked selected等
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作属性</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
爱好
<input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
/**
* jquery中提供一个函数 专门用于操作val属性
* val([值]) 一个方法两个用途 取值和赋值 , 只能操作value属性
*/
// 1.获取文本框value属性
console.log( document.getElementById("username").value );
console.log( $("#username").val() );
$("#username").val("扭曲丛林")
/**
* 操作其他的属性的时候 使用如下两个api
* 一个方法两个用途
* prop(key,value)->property 属性
* removeProp(key)
*
* attr(key,value)->attribute 属性 操作自定义属性 也可以操作预定义属性
* removeAttr(key)
*/
// 2.获取爱好的其他属性
$("#hobby").attr("myDddress" , "大北京");
console.log( $("#hobby").attr("myDddress") );
$("#hobby").removeAttr("myDddress")
$("#hobby").attr("name" , "xiaoshanghai");
console.log( $("#hobby").attr("name") );
$("#hobby").removeAttr("name")
/**
* prop : 操作boolean类型属性 checked 单选复选选中状态 selected 下拉框状态 disabled 不可用 readonly 只读
* checked="checked" selected="selected" disabled="disabled" readonly="readonly" 标准写法和畸形写法
*
* attr : 操作 预定义属性和自定义属性
*
* val : 只操作value属性
*/
// 2.获取爱好的checked属性
//attr 操作是普通的属性
//而checked属性 在js中应该是boolean类型属性
console.log($("#hobby").prop("checked"));
</script>
</body>
</html>4.3jQuery操作样式
1. 直接修改jq对象样式属性(style)
语法：
jq对象.css()
css(样式名) 获取
css(样式名,样式值) 设置
css({样式1:值1,样式2:值2}) 设置多个样式
2. 添加/删除jq对象样式
语法：
jq对象.addClass()
jq对象.removeClass()
3. 切换jq对象样式
语法：
jq对象.toggleClass() 无添加，有删除
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作样式</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
#p1{ background-color: red;}
.mp {
color: green;
background-color: pink;
}
.mpp {
background-color: lightgray;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4. <button id="toggle" onclick="toggleBtn()">切换</button>class样式 </p>
<script>
/**
* 方式1:
* jquery.css(key,value)
* 方式2:链式
* jquery.css(key,value).css(key,value).css(key,value)
* 方式3: 键值对
* jquery.css({key:value , key:value , key:value})
* 方式4:
* 通过addClass() 添加一个预定义好的class属性 removeClass("值")
* 方式5: toggleClass() 切换样式 原来有 干掉 原来没有 加入一个样式
*
* 一个方法两个用途
*/
let $p1 = $('#p1');//获取p1
let $p2 = $('#p2');//获取p2
let $p3 = $('#p3');//获取p3
let $p4 = $('#p4');//获取p4
// 1. 设置一个css样式 jquery.css(key,value)
$p1.css("backgroundColor" ,"pink");
$p1.css("color" ,"red");
$p1.css("fontSize" ,"40px");
// 2. 批量设置css样式
//$p2.css("backgroundColor" ,"pink").css("color" ,"red").css("fontSize" , "40px");
$p2.css({"backgroundColor":"pink" , "color":"red" });
// 3. 通过class设置样式
$p3.addClass("mp");
$p3.removeClass("mp");
function toggleBtn(){
// 4. toggleClass() 切换一个class toggle 切换 如果原来有 切换成没有 如果原来没有 加上一个
$p4.toggleClass("mpp");
}
//console.log($p2.css("color"));
</script>
</body>
</html>4.4jQuery操作元素
1. $(标签) 创建一个标签
$("<a></a>")
2. prepend() 在当前元素内部，首部添加子元素
父对象.prepend(子对象)3. append() 在当前元素内部，尾部添加子元素
父对象.append(子对象)
4. empty() 清空子元素
对象.empty()5. remove() 删除自己
对象.remove()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作元素</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="star">
<!--<li>玛尔扎哈</li>-->
<li>古力娜扎</li>
<li>迪丽热巴</li>
<!--<li>萨瓦迪卡</li>-->
</ul>
<p class="aaa">a</p>
<p class="aaa">b</p>
<p>c</p>
<p>d</p>
<!--
A.append(B) A中添加B元素-> 添加到末尾
B.appendTo(A) B加入到A中去-> 添加到末尾
A.prepend(B) A中添加B元素-> 添加到首位
B.prependTo(A) B加入到A中去-> 添加首位
-->
<script>
let $star = $('#star'); // 无序列表
// 1.前面添加马尔扎哈 ->创建对象 <li>玛尔扎哈</li>
let $liObj = $("<li></li>").html("玛尔扎哈");
$star.prepend( $liObj );
//$liObj.prependTo( $star );
// 2.后面添加萨瓦迪卡
$("<li></li>").html("萨瓦迪卡").appendTo( $star );
// 3.移出所有列表项 (他杀)
$star.empty(); 清空子元素
$star.html(""); //覆盖原有的内容
// 4.删除无序列表 (自杀)
$star.remove();
$("p").remove(".aaa");
</script>
</body>
</html>5jQuery事件绑定
js对象.事件属性=function(){}
jq对象.事件函数(function(){})
常见事件：
1. 点击事件：
click()：单击事件
dblclick()：双击事件
2. 焦点事件
blur()：失去焦点
focus():元素获得焦点。3. 鼠标事件：
mousedown() 鼠标按钮被按下。
mouseup() 鼠标按键被松开。
mousemove() 鼠标被移动。
mouseover() 鼠标移到某元素之上。
mouseout() 鼠标从某元素移开。
4. 键盘事件：
keydown() 某个键盘按键被按下。
keyup() 某个键盘按键被松开。
keypress() 某个键盘按键被按下并松开。5. 改变事件
change() 域的内容被改变。6. 表单事件：
submit() 提交按钮被点击。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq事件绑定</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br>
<input type="button" value="使用on绑定单击事件" id="btn1"> <br>
<input type="button" value="使用off解绑单击事件" id="btn2"> <br>
</body>
<script>
//js方式
document.querySelector("#jsBtn").onclick=function () {
this.value = "我被点击了"
}
//jquery方式
$("#jqBtn").click(function () {
$(this).val("我也被点了");
});
//使用on的方式绑定事件,使用off的方式解绑事件
$("#btn1").click(function () {
//给jqBtn绑定单击事件
$("#jqBtn").on("click",function () {
alert("我被点击了");
})
});
$("#btn2").click(function () {
//给jqBtn解绑单击事件
$("#jqBtn").off("click");
});
</script>
</html>以上就是jQuery的部分知识点啦，后续会继续补充。各位大佬如发现有知识点错误或者有不同的建议与意见，欢迎评论、私信指正，本人才疏学浅还需向各位大佬学习，还请不吝赐教！在此感谢各位的观看！谢谢！
3452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
