jQuery总结

前言

  通过之前JS的学习，我们了解到了关于JS的一些基础知识，但是JS有很多的属性和方法，在使用过程中写的代码未免太过冗余，所以“懒人推动世界”，通过对JS中属性和方法的封装，产生了jQuery。

正文

 什么是jQuery

  jQuery是第三方开发的，执行DOM操作的极简化的函数库。只有jQuery让用的，都没有兼容性的问题。

 使用方法

•   将jquery.js下载到服务器本地，在script中使用服务器路径；
•   使用CDN网络上共享的jquery.js，根据客户端到服务器的网络状况和访问量智能选择最优的服务器下载资源。

 jQuery和JS的区别

•   jQuery是一个JS框架，封装了js的属性和方法。让用户使用起来更加便利，并且增强了js的功能；
•   使用原生js是要处理很多兼容性的问题（注册事件等），由jquery封装了底层，就不用处理兼容性的问题；
•   原生的js的DOM和事件绑定和AJax等操作非常麻烦，jQuery封装以后操作非常方便。

 jQuery语法

  基础语法为：

$(selector).action()

  $定义jQuery；
  选择符（selector）查找HTML元素；
  jQuery的action()执行对元素的操作。

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

 jQuery使用示例

• 隐藏按钮

$(document).ready(function(){      //页面装载完成之后执行的代码
  $("button").click(function(){    //按钮单击触发的事件
  $(this).hide();                  //按钮隐藏
});

• 获取设置CSS类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");   //如果这些有blue类，就删除，如果没有，就添加
  });
});

总结

  jQuery作为前端的一个框架，在前端的开发中起着重要的作用，需要我们大量的去实战。