简化了JavaScript语言 封装

1.1 Jquery引包

Jquery是JavaScript的一个库 ,如果想要使用jquery,必须引入jquery , 引入jquery的script标签,不能和书写jquery语句的script标签同一个.

  1. <script src="js/jquery-1.9.1.js" />
  2. <script>
  3.   //书写所有的jquery语句
  4. </script>

1.2 jquery小体会

简化了元素的选择 . 直接使用css选择器

  1. <script>
  2.   //书写所有的jquery语句
  4.   //我们要选中第一个a标签并改变颜色
  5.   //使用js选择器获取元素
  6.   var a=document.getElementById("box").getElementsByTagName("a")[0];
  7. //改变颜色
  8. a.style.color="pink"
  9. //使用jquery 选择元素
  10. $("#box ul li a").css("color","red");
  11. </script>

2.1 jquery

Jquery 是js库 , 如果想要使用要先引入 , 引入之后, 才可以使用里面的各种各样的方法, 会向全局暴露一个$()函数 , 所以我们书写jquery的所有语句都是以$开头, jquery有很多方法 , 我们可以接着打点调用其他方法

实用方法1 : Js对象转为 jQuery对象直接使用 $()

  1. //获取元素
  2. var p1 = document.getElementsByTagName("p")[0];
  3. $(p1).html("今天天气很好");//直接改变了这个指定标签的文本的内容

实用方法2: jQuer对象转为 Js对象直接使用 []

  1. //获取元素
  2. var p1 = document.getElementsByTagName("p")[0];
  3. $(".teshu")[0].innerHTML = "改的P元素"

获取内部文本的方法:

  1. var p1 = document.getElementsByTagName("p")[0];
  • JS : p1.innerHTML
  • jQuery : $(“p.teshu”).html 说明: teshu 这个此 是设置的类名 class=”teshu”

面试: Js对象与jQuery 对象互相转换

2.2 选择器

Jquery非常好用的一点就是选择器, 直接使用css 选择器即可选中元素
Jquery支持css2.1选择器同时还支持css3选择器使用

Css2 选择器

  1. <div class="box" id="box">我是一个div</div>
  2. <div class="box1" >
  3. <h4>h4</h4>
  4. </div>
  5. <h3>h3</h3>
  6. <p>1</p>
  7. <p>2</p>
  8. <p>3</p>
  9. <p>4</p>
  10. <script src="js/jquery-1.9.1.js"></script>
  11. <script type="text/javascript">
  12. //css2.1选择器
  13. $(".box").css("color", "red");//jQuery中的 类选择器
  14. $("#box").css("color", "blue");//jQuery中的 id选择器
  15. $("div").css("color", "pink");//jQuery中的    元素选择器
  16. $("*").css("color", "green");//jQuery中的 通配符选择器
  17. $("div.box1 h4").css("color","red")//jQuery中的css后代选择器
  18. $("div.box").css("color","blue")//jQuery中的css交集选择器
  19. $("div,h3").css("color","green")//jQuery中的css并集选择器
  20. </script>

Css3 选择器

  1. <div class="box" id="box">我是一个div</div>
  2. <div class="box1" >
  3. <h4>h4</h4>
  4. </div>
  5. <h3>h3</h3>
  6. <p>1</p>
  7. <p>2</p>
  8. <p>3</p>
  9. <p>4</p>
  10. <script src="js/jquery-1.9.1.js"></script>
  11. <script type="text/javascript">
  12. //css3选择器 有哪些
  13. $("p:first").css("color","red");//序选择器.选中第一个p
  14. $("p:last").css("color","red");//序选择器.选中最后一个p
  15. $("p:eq(2)").css("color","blue");//序选择器.选中最后指定第几个p 注意在jS和jQuery中都是从0开始
  16. $("p").eq(1).css("color","green");//简化的写法 ,  eq是经常会用到的
  17. $("p:lt(3)").css("color","red")//设置p的样式选中小于3个p的样式
  18. $("p:lte(3)").css("color","red")//设置p的样式选中小于等于3个p的样式
  19. $("p:gt(2)").css("color","red")//设置p的样式选中大于3个p的样式
  20. $("p:odd").css("color","red")//设置p的样式选中p的样式    奇数方式选中
  21. $("p:even").css("color","blue")//设置p的样式选中p的样式    偶数方式选中
  22. </script>


2.3 jQuery函数

Jquery最初引入的时候向全局暴露的是jQuery函数, 但是后来人们觉得写起来复杂,才修改为$,jquery和$使用方式完全一样,jquery仍然保留,还可以继续使用

  1. // jQuery函数
  2. // 选中所有p元素并改变颜色
  3. jQuery("p").css("background-color","red")//选中网页上所有的p元素进行修改样式