什么是jQuery？
- 轻量级的Javascript库
- 核心是Javascript
- 不仅兼容了css3，还兼容各种浏览器
jQuery的优点？
- 容易上手
- 强大的选择器
- 解决浏览器的兼容
- 出色的事件机制
- 出色的Ajax封装
- 丰富的UI
特性和操作方法？
- 链式操作
- 回调函数
- 迭代器
- 延迟对象
- 队列
安装jQuery
npm安装jQurey
在cmd 中进入项目所在文件夹，运行：
npm install jquery@1.9.1
页面直接引用jquery
我们在页面 <head> 标签内中，通过 script 标签引入 jQuery 库即可。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
注意：jQuery 1.x版本的还可以兼容IE6、7、8，但是jQuery 2.x 版本的为了更好的兼容移动端开发，取消了对IE6、7、8的兼容。
如果需要兼容IE8，可以通过判断浏览器的版本来加载对应版本的jQuery。
<!--[if IE 8]> 仅IE8可识别 <![endif]-->可以判断IE浏览器版本是不是8
最终代码：<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.min.js"></script> <!--[if IE 8]> <script type="text/javascript" src="<%=path%>/js/jquery-1.9.1.min.js"</script> <![endif]-->这样如果不是IE8则只加载上3.1.1，是IE8的话后加载的会覆盖前面的。
如果需要兼容低版本的IE版本，一般的处理方式是给网页写两套或者多套JS代码以适应不同版本、不同类型的浏览器，然后使用原生JS判断浏览器的型号和版本来加载不同的JS文件，具体的实现方法如下：
<script language="javascript"> //判断是否为IE浏览器 if(navigator.appName == "Microsoft Internet Explorer") { if(navigator.appVersion.match(/7./i) == '6.' || navigator.appVersion.match(/7./i) == '7.' || navigator.appVersion.match(/7./i) == '8.') { document.write("<script src=\"myjs1.js\">"+"</script>"); }else{ document.write("<script src=\"myjs2.js.js\">"+"</script>"); } } </script>
引用jQuery
在index.html中，在<head>中引入jquery
<script type="text/javascript" src="node_modules/jquery/jquery.js"></script>
jQuery 样式
通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：
通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。
1、$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码
- 原生的js，当页面加载好后执行
window.onload = funciton(){....}
- jquery ，当页面加载好后执行
$(document).ready(function(){.....})
2、$("标签名").html("要添加到标签里的内容")
3、获取id名的不同
- 原生
let p = document.getElementById("imooc1");
- jquery
let $p = $('#imooc2');
4、如何把jQuery对象转化成DOM对象？
- 1、利用数组下标的方式读取到jQuery中的DOM对象
因为jquery对象是一个数组结构，所以可以通过下标索引找到元素。
<script type="text/javascript">
$(document).ready(function(){
let $p = $(""); //jquery对象
let p = $p[1]; //将jquery对象p中的第0位取出，
转换为dom对象
p.style.color = "pink"; //操作dom对象的属性
})
</script>
<body>
<p id="imooc1"></p>
<p id="imooc2">hi hi hi hi </p>
</body>
- 2、通过jQuery自带的get()方法
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
5、DOM对象转化成jQuery对象
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
<script type="text/javascript">
$(document).ready(function(){
let div = document.getElementByTagName("div");//dom对象
let $div = $(div); //将dom节点div转化为$div的jquery对象
let $first = $div.first();//找到第一个div元素
$first.css('color','red');//给第一个元素设置颜色})
</script>
网友评论