js的框架，底层由js语言组成，将js进行了封装，让功能更强大，语法变的更简洁。本质就是一个js文件。
jquery框架是一个优秀的javascript的轻量级框架之一，兼容css3和各大浏览器，提供了dom、events、animate（动画）、ajax等简易的操作。并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案。
jquery的宗旨是 write less do more。
jquery最主要的作用是简化js的dom树的操作。
版本
1.xxx.js 最广泛
2.xxx.js
3.xxx.js
jquery基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery demo</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// jquery引入 与 页面加载
// js 页面加载
// js 只会输出 页面加载2
window.onload = function(){
console.log("js页面加载1")
}
window.onload = function(){
console.log("js页面加载2")
}
// jquery 页面加载
// jquery 两个都会输出
$(function(){
console.log("jquery页面加载1")
})
$(function(){
console.log("jquery页面加载2")
})
$(function(){
// jquery获取标签
// jquery语法获取的对象是jquery对象
// 起名建议前面带 $，代表jquery对象
// js对象与jquery对象不能互用属性和方法
// 获取标签
var myinput = document.getElementById("myinput")
var mydiv = document.getElementById("mydiv")
var $myinput = $("#myinput")
var $mydiv = $("#mydiv")
// js与jquery对象互转
console.log($(myinput).val())
console.log($(mydiv).html())
// jquery对象本质是一个js数组，数组内部每个元素是js对象
console.log($myinput[0].value)
console.log($mydiv[0].innerHTML)
// 获取属性
console.log(myinput.value)
console.log(mydiv.innerHTML)
console.log($myinput.val())
console.log($mydiv.html())
// 事件绑定
mydiv.onclick=function(){
alert("js mydiv")
}
$mydiv.click(function(){
alert("jquery mydiv")
})
})
</script>
</head>
<body>
<input id="myinput" value="myinputValue"></input>
<div id="mydiv">log</div>
</body>
</html>
jQuery选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery demo</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
<body>
<input id="myinput" class="myinputClass" value="myinputValue"></input>
<button id="zisun">爷爷的所有后辈变红</button>
<button id="erzi">只有爷爷的儿子变红</button>
<div id="mydiv">爷爷
<div>儿子
<div>孙子</div>
</div>
</div>
</body>
<div id="testCss">
啦啦啦
</div>
<script type="text/javascript">
// 选择器 就是jquery找标签的方式
// 类似 js document.getElementById() ByName() 等等
// 1.基本选择器
// id选择器 $("#id")
// class选择器 $(".class的属性值")
// 标签选择器 $("标签名")
console.log($("#mydiv").html())
console.log($(".myinputClass").val())
console.log($("div").html())
// 修改样式方法
// jquery对象.css("样式名") 一个参数代表获取，两个参数代表设置
console.log($("div").css("color","blue"))
// 只设置一种属性值
$("#testCss").css("color","orange");
// 设置多属性值
$("#testCss").css({"color":"orange","text-align":"center"});
//2.层级选择器
// $("a b") a元素内部的所有b元素，儿子，孙子都包含
// $("a > b") a元素内部的所有b子元素，只有儿子
$("#zisun").click(function(){
$("#mydiv div").css("color","red")
})
$("#erzi").click(function(){
$("#mydiv > div").css("color","red")
})
// 3.属性选择器
// $("A[属性名]")
// $("A[属性名=值]")
// $("A[属性名=值][属性名=值]")
// 4.表单属性选择器（下面是常用的几个）
// :enabled 获得可用元素
// :disabled 获得不可用元素
// :checked 获得单选/复选框选中的元素
// :selected 获得下拉框中选中的元素
</script>
</html>
基本过滤选择器
jquery dom 常用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery demo</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
// js dom对象常用获取属性
// js对象.value 获取value属性的值，一般用于表单标签
// js对象.innerHTML 获取标签体的内容
// js对象.innerText 获取标签体文本
// js有关获取属性的方法
// js对象.getAttribute(属性名) 获取指定属性的属性值
// js对象.setAttribute(属性名)
// js对象.removeAttribute(属性名)
// jquery dom对象常用方法
// 下面三个方法如果填参数的话，就是设置
// val() 获取value属性的值，一般用于表单标签
// html() 获取标签体的内容
// text() 获取标签体文本
// jquery有关获取属性的方法
// attr() 一个参数是获取，两个参数是设置
// removeAttr()
// 对于 selected checked 这种选择的操作，获取选中的值，建议使用prop()
// prop() 返回的是boolean
// attr() 被选中就是checked，没被选中就是undefined
// jquery有关样式的方法
// css
.one{
}
.two{
}
// jquery
// 一个参数获取，两个参数设置
// 标签.attr("class","one")
// 标签.css()
// <标签名 class="one">
// 标签名.addClass("one") 添加类样式，指定类样式名字即可
// removeClass("") 删除指定的类样式名
// toggleClass("") 切换样式，如果没有类样式则添加，如果有类样式，则替换，这个是可以实现来回切换的
$("#one").toggleClass("second") // 设置点击事件，可以在原有样式和second样式之间来回切换
// jquery创建/插入对象
// $("<A></A>") 创建A标签 js createElement("A")
// append(ele) 添加成最后一个子元素，父子关系 city.append("<option value='-请选择-'>-请选择-</option>");
// prepend(ele) 添加成第一个子元素，父子关系
// before(ele) 添加到当前元素的前面，兄弟关系
// after(ele) 添加到当前元素的后面，兄弟关系
// remove() 删除指定元素，jquery对象.remove()
// empty() 清空指定元素的所有子元素
// parent()返回该标签的直接父元素
// 获取到的就是<li>，直接父节点
$("span").parent();
<body class="ancestors">body (曾曾祖父节点)
<div style="width:500px;">div (曾祖父节点)
<ul>ul (祖父节点)
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
</div>
</body>
// find() 方法返回被选元素的后代元素。
// 后代是子、孙、曾孙，依此类推。
// 获取到该对象的爷爷，寻找其后代class是sku_attr_value的，
// 移除class的checked属性
$(this).parent().parent().find(".sku_attr_value").removeClass("checked");
</script>
</html>
JS中attr和prop区别
- attr和prop区别
attr 是从页面搜索获得元素值，所以页面必须明确定义元素(例如checked的默认属性是不选中，必须写出来才行)才能获取值，相对来说较慢。
prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。
- attr和prop怎么选择？
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
- 例子
<input id="chke1" type="checkbox" />记住密码
<input id="chke2" type="checkbox" checked="checked" />记住密码
像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
$("#chke1").prop("checked");// false
$("#chke2").prop("checked");// true
$("#chke1").attr("checked"); //undefined
$("#chke2").attr("checked"); //"checked"
jquery动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画效果</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="yc">隐藏div</button>
<button id="xs">显示div</button>
<button id="qh">切换div</button>
<br />
<br />
<div id="divDemo" style="color: red;height: 80px;width: 80px;background-color: red;"></div>
</body>
<script type="text/javascript">
// 动画效果
// speed: 速度 毫秒值时间
// 还有三种预定速度之一的字符串("slow","normal", or "fast")
// easing:(Optional) 用来指定切换效果，
// 默认是"swing"，可用参数"linear"，变速运动 匀速运动
// 第三个参数 是一个函数，代表该动画完成时，要执行的代码
//基本api
// 基本
// show([s,[e],[fn]]) 显示
//
// hide([s,[e],[fn]]) 隐藏
// toggle([s],[e],[fn]) 切换
// 滑动
// slideDown([s],[e],[fn]) 往下滑
// slideUp([s,[e],[fn]]) 往上滑
// slideToggle([s],[e],[fn]) 切换
// 淡入淡出
// fadeIn([s],[e],[fn]) 一点点出现
// fadeOut([s],[e],[fn]) 一点点消失
// fadeToggle([s,[e],[fn]]) 切换
$("#yc").click(function() {
$("#divDemo").hide("slow")
})
$("#xs").click(function() {
$("#divDemo").show("fast")
})
$("#qh").click(function() {
$("#divDemo").toggle("normal", "linear")
})
$(function() {
// 定时任务
setTimeout(function() {
$("#divDemo").hide("slow")
}, 5000)
})
// hover(over,out)
// 两个参数都代表函数，移入做的函数，移出做的函数
$("#yc").hover(
function() {
$(this).css("color", "blue")
},
function() {
$(this).css("color", "red")
}
)
</script>
</html>
jquery事件
jquery点击事件
// 触发页面内所有段落的点击事件
// 将页面内所有段落点击后隐藏
$("p").click( function () { $(this).hide(); });
$("p").on("click", function(){
alert( $(this).text() );
});
jquery事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery事件绑定</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="btn">i am btn</button>
<button id="btn2">i am on</button>
<button id="cancel">cancel</button>
</body>
<script type="text/javascript">
$("#btn").click(
function() {
console.log("基本事件绑定")
}
)
$("#btn2").on("click",function(){
console.log("on 事件绑定")
})
$("#cancel").click(
function() {
// 事件解绑
// 不传递参数代表对所有事件解绑
$("#btn").off("click")
}
)
</script>
</html>
jQuery常用的四种遍历方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery常用的4种遍历方式</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</body>
<script type="text/javascript">
// 1. 普通for循环
// for(var i = 0;i < $("#city li").length;i++){
// // console.log($("#city")[i].innerHTML)
// console.log($($("#city li")[i]).html())
// }
// 2. each函数
// $("#city li").each(
// // index 元素的索引，ele 遍历的每个元素（js对象）
// function(index,ele){
// console.log("索引为：" + index)
// console.log("元素值为：" + $(ele).text())
// }
// )
// 3. 全局函数
// $.each(
// $("#city li"),function(index,ele){
// console.log("索引为：" + index)
// console.log("元素值为：" + $(ele).text())
// }
// )
// 4. 3.0新特性 与java增强for循环类似
for(ele of $("#city li")){
console.log("元素值为：" + $(ele).text())
}
</script>
</html>
jquery插件
插件就是将jquery实现的常用操作进行封装，封装后的小框架就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而我们需要做的是学会该插件的使用语法即可。
jquery的插件机制很简单，就是利用jquery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。
插件先不看了，等工作中具体用到再说吧
其他
demo
复选框全选 隔行换色 移入移出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery测试checkbox</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<table border="1px">
<tr>
<th width="40px"><input onclick="selectAll(this)" type="checkbox" class="itemCheckbox" id="firstCheckbox"
value="value" /><label for=""></label></th>
<th width="50px">id</th>
<th width="90px">分类</th>
<th width="150px">分类商品</th>
<th width="90px">操作</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="itemCheckbox" id="" value="" /><label for=""></label></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td align="center"><button>修改|删除</button></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="itemCheckbox" id="" value="" /><label for=""></label></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td align="center"><button>修改|删除</button></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="itemCheckbox" id="" value="" /><label for=""></label></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td align="center"><button>修改|删除</button></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function(){
// 隔行换色
$("tr:not(:first):even").css("background-color","red");
$("tr:not(:first):odd").css("background-color","yellow");
var trInitColor;
// 移入移出
$("tr:not(:first)").hover(function(){
// 记录移入之前的颜色，等移出后进行恢复
trInitColor = $(this).css("background-color")
$(this).css("background-color","orange");
},function(){
$(this).css("background-color",trInitColor);
});
})
// 参数名写this会报不识别，写obj就可以，不明白为什么，暂时不去理它
function selectAll(obj){
// 点一下全选，再点一下全不选
$(".itemCheckbox").prop("checked",$(obj).prop("checked"))
}
</script>
</html>
使用jquery找出值为3的input在input中的位置
<html>
<head>
<title>测试jquery</title>
<script type="text/javascript" src="jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
$(function(){
var $list = $("input[name=radioGroup]");
for(var i=0;i<$list.length;i++)
if($($list[i]).val() === '3'){
console.log($list[i]);
console.log("值为3的input在input中的位置是：" + i);
}
})
</script>
</head>
<body>
<input id="wonima" type="radio" name="radioGroup" />
<input type="radio" name="radioGroup"/>
<input type="radio" name="radioGroup"/>
<input type="radio" name="radioGroup"/>
<input type="radio" name="radioGroup" value=3 />
<input type="radio" name="radioGroup"/>
</body>
</html>
快速获取表单所有字段的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery demo</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>
</body>
<script type="text/javascript">
// Results: single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
</script>
</html>
为什么是我不会？为什么不是我不要？为什么不是你不可以？
直到现在，我才知道这整起事件很可以化约成这一幕：他硬插进来，而我为此道歉。
房思琪的初恋乐园
林奕含
扫一扫
6262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
