JQuery系列 - 爱码网

jQuery是什么

1. jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

2. jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

3. 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

4. jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

5. jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择

什么是jQuery对象

jQuery对象是jQuery包装DOM对象后产生的对象，jQuery对象是JQuery独有的，如果一个对象是JQuery，

那么他就可以使用jQuery里的方法

$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中html()是jQuery里的方法。

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

约定：如果获取的是jQuery对象，那么要在变量前面加上$

var $variable=jQuery 对象

var variable= DOM 对象

$variable[0]:jQuery对象转为DOM对象

$("#msg").html;

$("#msg")[0].innerHTML

jQuery基础语法

$(selector).action()

选择器

id选择器 $("#id")

标签选择器 $("tagName")

class选择器 $(".className")

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

组合选择器 $("#id, .className,tagName")

层级选择器

x和y可以为任意选择器

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

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

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

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

基本筛选器

:first 第一个

:last 最后一个

:eq(index) 索引等于index的那个元素

:even 匹配所有索引值为偶数的元素，从零开始计数

:odd 匹配所有索引值为奇数的元素，从零开始计数

:gt(index) 匹配所有大于给定索引值的元素

:lt(index ) 匹配所有小于给定索引值的元素

:not(元素选择器) 移除所有满足not的条件的标签

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

1.练习（实现隔行变色）

html代码

将奇数行变为红色

将偶数行变为黄色

将表格里面的字变成白色

$("tr").css("color","white")

例如

$("div.has(h1)") 找到所有后代中有h1标签的div标签

$("div.has(.c1)") 找到所有后代中有c1样式类的div标签

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

$("li:not(.c1)") 找到所有不包含c1 class的li的标签

注意：

1.这里的has和not不是简单的有和没有的意思，他两没啥关系（不是一组）

2.:not和:has通常用.not()和.has()代替

3.$("div:has(.c1)")等价于("div.c1")并不等价于$("div.c1")

2.练习（左侧菜单）

<!DOCTYPE html>
<html lang="en">
<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</title>
    <style>
     .left{
          position: fixed;
          left:0;
          top:0;
          width:20%;
          background-color: darkgrey;
          height: 100%;
      }
        .title{
          text-align: center;
            padding:10px  15px;
            /*上内边距和下内边距是10px*/
            /*右内边距和左内边距是15px*/
            /*假如：padding: 10px;*/
            /*上下左右内边距都是10px*/
        }

.content{
    text-align: center;
    background-color: #336699;
}
.content>div{
          padding: 10px;
         color:white;
         border-bottom: 1px solid black;
        }
.hide{
     display: none;
      }

    </style>
</head>
<body>
<div class="left">
    <div class="item">
        <div class="title" onclick="show(this)">菜单一</div>
        <div class="content">
        <div>111</div>
        <div>222</div>
        <div>333</div>
       </div>
    </div>
    <div class="item">
        <div class="title" onclick="show(this)">菜单二</div>
        <div class="content">
        <div>111</div>
        <div>222</div>
        <div>333</div>
            </div>
    </div>
    <div class="item">
        <div class="title" onclick="show(this)">菜单三</div>
        <div class="content">
        <div>111</div>
        <div>222</div>
        <div>333</div>
         </div>
    </div>
</div>
</body>
<script src="jquery3_0_0.js"></script>
<script>
    function show(ths) {
        $(".content").addClass("hide");
        $(ths).next().removeClass("hide");
    }


</script>
</html>

View Code