jQuery基础：样式

2018-05-06 本文已影响18人兔子不打地鼠打代码

什么是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。

可以判断IE浏览器版本是不是8
最终代码：
<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.min.js"></script>

这样如果不是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>