JQuery 概念
jQuery是一个快速、简洁的JavaScript框架 , (JavaScript代码库 )
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：
1- 具有独特的链式语法和短小清晰的多功能接口；
2- 具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
3- 拥有便捷的插件扩展机制和丰富的插件。
4- jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
2006年1月14日，John正式宣布以jQuery的名称发布自己的程序库
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
JQurey 基本语法
文件下载
JQuery的版本下载 (jquery下载所有版本（实时更新）)
http://www.jq22.com/jquery-info122
JQuery的版本 类似于 Inter 芯片版本号
jquery.js (开发版)和 jquery.min.js(发布版) 区别
内容完全一致 , 区别在于文本格式
jquery.js 格式 良好的, 有利于程序员进行阅读 适用于测试、学习和开发
jquery.min.js 省略了多余的换行和空格 , 使文件尽量的做到体积最小
文件体积小, 有利于加快文件在网络中的传输速度(适用于发布的产品和项目)
文件引入
<!-- 引入外部JQuery 文件 -->
<script src="js/jquery.js" type="text/javascript"></script>
页面加载函数
主要在页面加载完毕之后, 再去执行函数中的内容
使用加载函数的原因
script 标签 在对象标签之前 , 获取对象不起作用
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(123);
}
</script>
<button id="btn">测试</button>
script 标签 在对象标签之后,才起作用
<button id="btn">测试</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(123);
}
</script>
出现这种情况的原因
程序从上到下开始解释运行
对象标签还未加载, 就是用 JS代码 获取该对象 , 失败
window.onload JS原生页面加载函数
// 使用window.onload 优化代码
<script>
// 页面加载完毕之后, 执行该函数
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(123);
}
}
</script>
<button id="btn">测试</button>
JQuery 的页面加载函数
JQuery(document).ready(匿名函数);
$(document).ready(匿名函数);
$(匿名函数);
<!-- 引入外部JQuery 文件 -->
<script src="js/jquery.js"></script>
<script>
$(function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(123);
}
});
</script>
<button id="btn">测试</button>
页面加载函数对比
JQuery 和 window.onload
| 区别 | JQuery | window.onload |
|---|---|---|
| 执行顺序 | 先执行 | 后执行 |
| 执行时机 | 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 | 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 |
| 编写个数 | 可以书写多个页面加载函数, 按顺序执行 | 只能书写一个, 如果存在多个, 后写的覆盖之前的 |
语法
工厂函数
$() 具有多种用法
选择器
selector $(“CSS选择器”) 获取指定的 DOM 元素
支持CSS 选择器 $("#id") $(".class") $(“标签”)
方法action()
核心方法
文档处理
效果方法
事件方法
语法 和 DOM的区别 没有 on 关键字
$("").click(function(){
// 事件绑定的内容
});
操作样式常用方法
addClass() 添加类名
css() 给元素设置样式
// 给div 添加 一组样式
$(".dv").css("height","300px");
// 添加多组样式
$(".dv").css({"height":"300px","width":"300px"});
添加一组样式
$("").css("a","a1")
添加多组样式
$("").css({"a":"a1","b":"b1","c":"c1"})
jQuery代码风格
“$”等同于“ jQuery ”
链式操作
对一个对象进行多重操作，并将操作结果返回给该对象
隐式迭代
通过 选择器获取对象之后, 如果获取的是一个数组对象, 无需手动遍历, 自行迭代
<ul>
<li>宫骏腾来电话啦</li>
<li>宫骏腾来电话啦</li>
<li>宫骏腾来电话啦</li>
<li>宫骏腾来电话啦</li>
<li>宫骏腾来电话啦</li>
<li>宫骏腾来电话啦</li>
</ul>
</body>
<script>
// 原始JS 的书写方式
var lis = document.getElementsByTagName("li");
for(let i in lis){
lis[i].style.backgroundColor = "green";
}
// 使用JQ 的方式
$("li").css("background-color","red");
</script>
DOM对象和jQuery对象
DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
命名的时候, 最好养成习惯如果一个对象是使用Jquery 的方式获取的, 最好在变量前添加 $ , 表示这是一个JQuery对象
变量名取值
DOM对象 var p = document.getElememtById("pid");
JQuery var $p = $("#pid");
$("#title").html( );
等同于
document.getElementById("title").innerHTML;
对象之间相互转换
DOM 转换为JQ对象
$(Dom对象) 就成为了 JQuery 对象
JQ 对象 转换为 DOM对象
$("p")[0] 就转换成为了 DOM对象
$("p").get(0);
JQuery 选择器
CSS选择器
基本
分类
标签
类
id
全局
并集
交集
<script>
$(function(){
/*$("h1").css("background-color","red");
$(".dv").css("background-color","green");
$("#pid").css("background-color","blue");*/
$(".dv,#pid").css("background-color","green");
$("h1.dv").css("background-color","green");
});
</script>
</head>
<body>
<div class="dv">人间四月天</div>
<p id="pid">人间四月天</p>
<h1>人间四月天</h1>
<h1 class="dv">人间四月天</h1>
</body>
层级
后代选择器
子选择器
相邻元素选择器
同辈元素选择器
环境准备
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body>div,p{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
margin-left: 20px;
}
div>div,p>div{
width: 40px;
height: 40px;
border: 1px solid blue;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<br><br>
<button id="btn1">后代选择器</button>
<button id="btn2">子选择器</button>
<button id="btn3">相邻元素选择器</button>
<button id="btn4">同辈元素选择器</button>
<br><br>
<hr>
<br><br>
<div class="father1">
<div class="son11"></div>
<div class="son12"></div>
</div>
<div class="father2">
<div class="son21"></div>
<div class="son22"></div>
</div>
<div class="father3">
<div class="son31"></div>
<div class="son32"></div>
</div>
<div class="father4">
<div class="son41"></div>
<div class="son42"></div>
</div>
<p class="father5">
</p>
</body>
案例代码
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
});
$("#btn2").click(function(){
$("div>div").css("background-color","gold");
});
$("#btn3").click(function(){
$(".father1+div").css("background-color","gold");
});
$("#btn4").click(function(){
$(".father2~div").css("background-color","gold");
});
});
属性
环境准备
<br>
<button id="btn1">包含属性</button>
<button id="btn2">属性以什么开头</button>
<button id="btn3">属性以什么结尾</button>
<button id="btn4">属性包含什么</button>
<br><br>
<hr>
用户 <input type="text" name="username"> <br><br>
密码 <input type="password" name="userpassword"> <br><br>
邮箱 <input type="email" name="email"> <br><br>
电话 <input type="text"> <br><br>
地址 <input type="text"> <br><br>
案例代码
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("input[name]").css("background-color","red");
});
$("#btn2").click(function(){
$("input[name^='user']").css("background-color","red");
});
$("#btn3").click(function(){
$("input[name$='word']").css("background-color","red");
});
$("#btn4").click(function(){
$("input[name*='a']").css("background-color","red");
});
});
</script>
</head>
<body>
<br>
<button id="btn1">包含属性</button>
<button id="btn2">属性以什么开头</button>
<button id="btn3">属性以什么结尾</button>
<button id="btn4">属性包含什么</button>
<br><br>
<hr>
用户 <input type="text" name="username"> <br><br>
密码 <input type="password" name="userpassword"> <br><br>
邮箱 <input type="email" name="email"> <br><br>
电话 <input type="text" name="word"> <br><br>
地址 <input type="text"> <br><br>
</body>
条件过滤选择器
基本过滤
:first
:last
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:not(选择器)
环境准备
<style>
*{
margin: 0;
padding: 0;
}
body>div,p{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
margin-left: 20px;
}
div>div,p>div{
width: 40px;
height: 40px;
border: 1px solid blue;
float: left;
margin-left: 5px;
background-color: blue;
}
</style>
<body>
<br><br>
<button id="btn1">测试first last</button>
<button id="btn2">指定位置 </button>
<button id="btn3">取反</button>
<button id="btn4">间隔</button>
<br>
最低0.47元/天 解锁文章
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
