1、本章目标
了解jquery
了解jquery和js的区别
掌握jquery的入门
掌握jquery对象和dom对象的区别
2、jquery简介
jquery是一个轻量级的JavaScript函数库
用于客户端浏览器
核心功能：
HTML元素选取和操作
HTML事件函数
css操作
ajax
jquery的优势：
1、轻量级
2、强大的选择器
3、浏览器的兼容性比较好
4、完善的ajax
.........
3、jquery安装
1、下载jquery的js文件
2、在页面中引入jquery的js文件
3、jquery的代码放在：
$(document).ready(functioin(){
//代码
});
$(function(){
//代码
});
上述的两种写法的功能：类似于window.onload,初始化加载
上述的两种写法的功能和window.onload区别：
1、window.onload等页面所有内容加载完成后才会执行
$(document).ready() 等页面结构加载完后才会执行
2、window.onload若有多个，只会执行最后一个
$(document).ready()若有多个，均被执行
4、jquery对象和dom对象
dom对象：页面中所有的元素节点
jquery对象：jquery对dom对象包装后产生的对象
通常:$("#元素id")
注意：dom对象和jquery对象不要混合使用
比如：获取文本框的值
js：value属性
jquery：val()方法
5、jquery对象和dom对象的相互转换（了解）
jquery对象转dom对象
（1）jquery对象[下标]
（2）jquery对象.get(下标)
将jquery对象当做dom对象数组，通过下标的方式进行访问
dom对象转jquery对象
$(dom对象)
6、$的冲突问题
jquery中封装了$符号，如果其他的框架也有$符号，可能会有冲突的问题
解决方案1：
jquery的引入没有先后顺序
在jquery代码中第一行加入：jQuery.noConflict(); 表示释放jquery对象中的$
比如：
<script>
jQuery.noConflict(); //释放jquery中的$符号
jQuery(funcion(){
jQuery("p").css("color","red");
});
</script>
解决方案2：
把jquery的引入放在最前面，再引入其他的框架
比如：
<script>
jQuery(function(){
$("p").css("color","red");
});
</script>
解决方案3：
把jquery的引入放在最前面，在引入其他框架
比如：
//闭包
(function($){
$("p").css("color","red");
})(jQuery);
本章代码
demo1
<html> <head> <script src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //onload只会执行最后一个 window.onload = function(){ alert('1'); } window.onload = function(){ alert('2'); } //两个都会被执行 $(document).ready(function(){ alert('3'); }); $(function(){ alert('4'); }); </script> </head> <body> </body> </html>
demo2
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="js/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ //js获取文本框的值 //为btn按钮绑定单击事件 document.getElementById("btn").onclick = function(){ var v = document.getElementById("txt").value; alert(v); } //jquery获取文本框的值 //为btn按钮绑定单击事件 $("#btn").click(function(){ //通过jquery对象写法,获取文本框对象的值 var v = $("#txt").val(); alert(v) }); }); </script> </head> <body> <input type="text" id="txt" /> <input type="button" value="获取文本框的值" id="btn"/> </body> </html>
demo3
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="js/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ document.getElementById("btn").onclick = function(){ //获取文本框的dom对象 var v = document.getElementById("txt"); //将dom对象转为jquery对象 var v2 = $(v); var v3 = v2.val(); alert(v3) } $("#btn").click(function(){ //获取文本框的jquery对象 var v = $("#txt"); //将jquery对象转为dom对象 var v2 = v.get(0); //v[0]; var v3 = v2.value; alert(v3) }); }); </script> </head> <body> <input type="text" id="txt" /> <input type="button" value="获取文本框的值" id="btn"/> </body> </html>