初识JQuery

初识JQuery

JQuery是JS的一个库！ 封装好的一个库！它就是类似于Java中的一个jar包。

JQuery是最具代表的一个库，它是划时代的产品。

1.了解JQuery

**核心理念：**write less,do more（写的更少，做的更多）

只要JS能做的，它都能做，大大简化了开发代码。

• 强大的选择器

  它支持CSS3的所有选择器，还单独定制了一套高级选择器。

• 出色的DOM封装

  简化且封装了大量的DOM操作

• 可靠的事件处理机制

  JQ吧所有事件都封装成了一个个单独的函数

  xxx.onclick = function(){
      
  }
  xxx.click();
  

• 浏览器的兼容性好

  JQ封装过程中处理了兼容性问题。JQ 2.0以前的版本 兼容IE6 7 8

• 隐式迭代

  很多选择器在使用时 无感知的进行了一系列的迭代（遍历）处理

• 丰富的插件支持

  JQ插件丰富，因为JQ大大简化了开发，所以很多开发人员也乐意使用JQ去开发一些插件

• 对AJAX做了大量封装（了解）

  一种异步无刷新的请求技术！

2. 掌握JQuery的环境搭建和使用

2.1 环境搭建

• 下载JQ （可以从JQ官网、JQ插件库网、GitHub）

  版本选择： 1.12.4 或者 1.8.3 它们兼容IE 6/7/8

  每个版本都有两种文件选择：开发版（可以直接看到源码，方便调试）、发布版（压缩后文件体积小，加载速度慢）

• 导包（你想使用JQ的代码，就需要先引入JQ，必须在你的代码前<因为代码是自上而下加载的>）

  <script src="jq地址" type="text/javascript" charset="utf-8"></script>
  

• 新建一个Script标签开始使用

  <script type="text/javascript">
      // 页面加载函数
      $(function(){
          alert("Hello jQuery！");
      });
  </script>
  

2.2 原生JS的页面加载函数和JQ的页面加载函数的区别

2.3 JQ的语法

$(选择器).action();   
JQuery().action

工厂函数的作用：用于将DOM对象或者一系列的JQ支持的语法转换为JQ对象
$:函数名 等价于JQuery		
工厂函数参数：选择器  用于选中具体要进行操作的DOM对象
action:JQ的方法或者属性等...

// $(document) 它可以将DOM对象转换为JQ对象
//read();  JQ的页面加载方法/函数
$(document).ready(function(){});

$(function(){});

2.4 JQ的基本页面操作函数

• CSS() 等价于 JS的 xxx.style.backgroundColor = xxx;

// 给div设置背景颜色为绿色
// $("#test").css("background-color","green");
// 可以同时设置多个
$("#test").css({
    "background-color":"green",
    "border":"5px solid yellow"
});

• addClass() 等价于xxx.className = "XX";

  $("#test").addClass("test");
  

• show（） 展示

• hide（） 隐藏

  // 绑定事件
  $("#hide").click(function(){
      // $("#test").hide();
      // $("#test").hide("2000");
      // $("#test").fadeOut("2000");
      $("#test").slideUp("5000");
  });
  $("#show").click(function(){
      // $("#test").show();
      //	$("#test").fadeIn("3000");
      $("#test").slideDown("5000");
  });
  

2.5 JQ的链式操作

对一个对象进行多重操作，并将操作结果返回给该对象。

2.6 JQ和DOM对象的转换

JQ的函数和DOM的函数属性等都是对立的，不可通用，所以有些时候我们需要进行转换，才能使用对应的一些函数（忘记了一些函数但记得另一个函数的使用）

// DOM -> jQ
$(DOM对象)
$(document).ready();

var divEle = document.getElementById("test");
$(divEle)

// jQ -> DOM  你可以把一个jQ对象理解为一个数组  $("tr")
$("tr").get(索引);
$("tr")[索引];

3. 掌握JQuery的常用选择器

3.1 基本选择器

同CSS选择器，略

//  1.点击dt的时候，利用标签选择器将两个<dd>的内容显示
$("dt").click(function(){
    // jQ有隐式迭代
    $("dd").show();
});

// 2.利用标签选择器，将<h1>元素的字体颜色设置为蓝色
$("h1").css("color","blue");

//  3.利用类选择器将类名为price的元素背景设置为#efefef,内边距统一为5px
$(".price").css({
    "background":"#efefef",
    "padding":"5px"
});

// 4.利用id选择器将id名为author的字体颜色设置为#083499
$("#author").css("color","#083499");

// 5.利用并集选择器 将类名为intro和标签<dt>和<dd>的字体颜色设置为#ff0000
$(".intro,dd,dt").css("color","#ff0000");

// 6.使用全局选择器将所有字体粗细设置为加粗
$("*").css("font-weight","bold");

3.2 层次选择器

// $(".textRight p").css("color","red");
			 
// $(".textRight>p").css("color","red");

// $("h1+p").css("text-decoration","underline");
$("h1~p").css("text-decoration","underline");

3.3 属性选择器

// $("#news a[class]").css("background","#c9cbcb");
			
// $("#news a[class=hot]").css("background","#c9cbcb");
// $("#news a[class!=hot]").css("background","#c9cbcb");
// $("#news a[href^=www]").css("background","#c9cbcb");
// $("#news a[href$=html]").css("background","#c9cbcb");
$("#news a[href*=k2]").css("background","#c9cbcb");

3.4 过滤选择器

基本过滤器：

//  1.使用过滤选择器给类名为contain下的<h2>设置背景颜色为#2a65ba和字体颜色为#ffffff
$(".contain :header").css({
    "background":"#2a65ba",
    "color":"#fff"
});

// 2.使用过滤选择器给类名为contain下的最后一个<li>的边框设置为none；
$(".contain li:last").css("border-bottom","none");

// 3.使用过滤选择器给类名为contain下的第一个<li>设置字体大小为16px 字体颜色为#e90202
/*$(".contain li:first").css({
				"font-size":"16px",
				"color":"#e90202"
			});*/

// 4.使用过滤选择器给类名为contain下的偶数行<li>背景颜色设置为#f0f0f0
// $(".contain li:even").css("background","#f0f0f0");

// 5.使用过滤选择器给类名为contain下的奇数行<li>背景颜色设置为#cccccc
// $(".contain li:odd").css("background","#cccccc");

// 6.使用过滤选择器给类名为contain下的前两个<li>的字体颜色设置为#708b02
// $(".contain li:lt(2)").css("color","#708b02");

// 7.使用过滤选择器给类名为contain下的后两个<li>的字体颜色设置为#b66302
// $(".contain li:gt(3)").css("color","#708b02");

// 8.使用过滤选择器给类名为contain下的第三个<li>的背景颜色设置为#02acaa
// $(".contain li:eq(2)").css("color","#02acaa");

$(".contain li:not(li:eq(2))").css("color","#02acaa");

可见性过滤选择器：

$("#show").click(function(){
				
    // 将所有隐藏的p都显示出来
    $("p:hidden").show();

});

$("#hide").click(function(){

    $("p:visible").hide();

});

**

$("#show").click(function(){
				
    // 将所有隐藏的p都显示出来
    $("p:hidden").show();

});

$("#hide").click(function(){

    $("p:visible").hide();

});

表单过滤选择器：(表单校验章节)