jQuery对象

jQuery对象就是通过jQuery包装DOM对象后所产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuer对象，那么他就可以使用jQuery里面的方法，例如：$(“#i1”).html()

这个的意思是获取id值为 i1 元素的HTML代码。其中html()是jQuery里的方法。相当于：document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

jQuery对象 var $variable = "jQuery对象";

DOM对象 var variable = "DOM对象";

jQuery转化DOM $variable[0] //jQuery对象转成DOM对象

jQuery对象和DOM对象的使用： //jQuery对象可以使用jQuery的方法 $("#i1").html();

//DOM对象可以使用DOM的方法： $("#i1")[0].innerHTML;

jQuery的基础语法

查找标签

基本选择器

id选择器： $("#id")

标签选择器： $("tagName")

class选择器： $(".className")

配合使用: //找到有 c1 class类的div标签 $("div.c1")

所有元素选择器

所有元素选择器 $("*")

组合选择器

$("#id, .className, tagName")

并列+混用： $("#d1, .c1, p")

后代： $("div span")

儿子： $("div > span")

毗邻： $("div + span")

弟弟： $(""div ~ span)

$("x y");// x的所有后代y（子子孙孙）

$("x > y");// x的所有儿子y（儿子）

$("x + y")// 找到所有紧挨在x后面的y

$("x ~ y")// x之后所有的兄弟y

基本筛选器

:first // 第一个 $('ul li:first')

:last // 最后一个 $('ul li:last')

:eq(index)// 索引等于index的那个元素 $('ul li:eq(2)')

:even // 匹配所有索引值为偶数的元素，从 0 开始计数 $('ul li:even')

:odd // 匹配所有索引值为奇数的元素，从 0 开始计数 $('ul li:odd')

:gt(index)// 匹配所有大于给定索引值的元素 $('ul li:gt(2)')

:lt(index)// 匹配所有小于给定索引值的元素 $('ul li:lt(2)')

:not(元素选择器)// 移除所有满足not条件的标签 $('ul li:not("#d1")')

:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

$("div:has('h1')")

$("div:has(.c1)")

$("li:not(.c1)")// 找到所有不包含c1样式类的li标签

$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

练习

自定义模态框，使用jQuery实现弹出和隐藏的功能 jQuery版自定义版本：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
      width: 600px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="弹" id="i0">

<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label>
  <input id="i1" type="text">
   <label for="i2">爱好</label>
  <input id="i2" type="text">
  <input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var tButton = $("#i0")[0];
  tButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");
  };

  var cButton = $("#i3")[0];
  cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");
  }
</script>
</body>
</html>

jQuery的对象和基础语法