jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)-CSDN博客

一、jQuery
1、介绍
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。



2、优势
    1.一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
    2.丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，
　　　 再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
    3.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
    4.事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
    5.Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
    6.跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
    7.插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，
      并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。


3、内容
1.选择器
2.筛选器
3.样式操作
4.文本操作
5.属性操作
6.文档处理
7.事件
8.动画效果
9.插件
10.each、data、Ajax

小提示：
1.jQuery官网：https://jquery.com/
2.jQuery中文文档：http://jquery.cuishifeng.cn/



4、jQuery版本
1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
     维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，
     如果没有特殊要求的话，一般都会选择放弃对678的支持。


5、jQuery对象
1.概述
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。
例如：
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。



2.约定
一般情况下我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象



3.jquery对象和dom对象转换

3-1、jQuery对象转成DOM对象：jQuery对象可以通过[index]方法获得相应的DOM对象。

var $divEle = $("#d1");  //得到jQuery对象

var divEle = $divEle[0];  //转换成DOM对象
var divEle = $("#d1")[0];  //转换成DOM对象

jQuery还可以通过.get(index)方法得到相应的DOM对象
var divEle = $divEle.get(0);  //转换成DOM对象



3-2、DOM对象转成jQuery对象：用$()将DOM对象包装起来，就能获得jQuery对象了

var divEle = document.getElementById("d");  //得到DOM对象

var $divEle = $(divEle);  //转成jQuery对象






二、jQuery之查找标签
基础写法：$(selector).action()

1、基本选择器
id选择器：$("#id")

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

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


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

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

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




2、层级选择器
x和y可以为任意选择器

$("x y");  // x的所有后代y（子子孙孙）
$("x > y");  // x的所有儿子y（儿子）
$("x + y")  // 找到在x后面的第一个y(毗邻)
$("x ~ y")  // 找到x的所有的弟弟y




3、属性选择器
[attribute]
[attribute=value]  // 属性等于
[attribute!=value]  // 属性不等于

例子：
<input type="text">
<input type="password">
<input type="checkbox">

$("input[type]")  // 找到有type属性的input标签
$("input[type='checkbox']");  // 找到type属性等于checkbox的input标签
$("input[type!='text']");  // 找到type属性不是text的input标签





4、基本筛选器
:first // 第一个
:last // 最后一个

:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:eq(index)// 索引等于index的那个元素

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

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



例1：
$("div:has(h1)")  // 找到所有后代中有h1标签的div标签
$("div:has(.c1)")  // 找到所有后代中有c1样式类的div标签

$("li:not(.c1)")  // 找到所有不包含c1样式类的li标签(即没有c1样式的li标签)
$("li:not(:has(a))")  // 找到所有后代中不含a标签的li标签

区别：

$("div:has(h1)")：先找到所有div标签，然后看div标签的子子孙孙(后代)中是否有h1标签，有则符合条件，选择到的是div标签
比如：
<div>
    <h1>符合条件</h1>
</div>

<div>
    不符合条件
</div>


$("div:not(.c1)")：先找到所有div标签，然后看div标签的class属性，没有class="c1"的div标签才符合条件，选择到的是div标签
比如：
<div>
    符合条件
</div>


<div class="c1">
    不符合条件
</div>

has和not




例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li id="l3">3</li>
    <li>4</li>
    <li>5</li>
</ul>

<hr>

<div><p>div>p</p></div>

<div class="c1"><span>div>span</span></div>

<div class="c1">
    <p>
        <span>div>p>span</span>
    </p>
</div>

</body>
</html>

HTML代码


详解：
// 找到ul标签下的所有子标签li
$("ul li");

// 找到ul标签下的第一个子标签li
$("ul li:first");

// 找到ul标签下的最后一个子标签li
$("ul li:last");

// 找到ul标签下的索引为1的子标签li
$("ul li:eq(1)");



// 找到第一个li标签
$("li:first");

// 找到最后一个li标签
$("li:last");

// 找到索引大于1的li标签
$("li:gt(1)");

// 找到索引小于1的li标签
$("li:lt(1)");

// 找到索引等于1的li标签
$("li:eq(1)");

// 找到索引为偶数的li标签
$("li:even");

// 找到索引为奇数的li标签
$("li:odd");





5、表单筛选器(仅用于筛选表单)
1.表单type类型
:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

例如：找到所有的checkbox
用属性选择器：$("input[type='checkbox']")

用表单筛选器：$(":checkbox")



2.表单对象属性:
:enabled
:disabled
:checked
:selected

例如：
<!--HTML代码-->
<form action="">
    <input type="checkbox" value="a">
    <input type="checkbox" value="b">
    <input type="radio" value="c">

    <select  id="">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>

找到被选中的复选框
$(":checked");

注意：
    当表单中只有一种选择按钮的时候，上面这样写是可以的，
    但是表单中同时有复选按钮(checkbox)、单选按钮(radio)和下拉框(select)的时候，
    上面这样写$(":checked");会把所有选中的标签都找到，即不分是单选还是复选还是下拉框。
    因此一般要找到被选中的那个标签，可以指定$("input:checked");是input标签中选中的按钮。
    或者$("option:selected");是option标签中选中的下拉框。




二、筛选器方法
1.下一个元素(弟弟)：
$("#id").next()  // 查找id的下一个元素(是同级的元素，不是子孙)
$("#id").nextAll()  // 查找id下面的所有元素
$("#id").nextUntil("#i2")  // 查找id下面的元素一直找到i2就停止(不包括i2的元素)


2.上一个元素(哥哥)：
$("#id").prev()  // 查找id的上一个元素
$("#id").prevAll()  // 查找id上面的所有元素
$("#id").prevUntil("#i2")  // 查找id上面的元素一直找到i2就停止(不包括i2的元素)



3.父亲元素：
$("#id").parent()  // 查找当前元素的第一个父元素
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil("body") // 查找当前元素的所有的父辈元素，一直找到body就停止(不包括body)



4.儿子和兄弟元素：
$("#id").children();// 查找id的所有儿子
$("#id").children("selector");// 查找某个儿子
$("#id").children("#i1");// 查找id为i1的儿子
$("#id").siblings();// 查找id的所有兄弟(弟弟哥哥都是兄弟)

somenode.parentElement            父节点标签元素
somenode.children                 所有子标签
somenode.firstElementChild        第一个子标签元素
somenode.lastElementChild         最后一个子标签元素
somenode.nextElementSibling       下一个兄弟标签元素
somenode.previousElementSibling   上一个兄弟标签元素

对比JS





5.查找(子孙)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")  // find是在子子孙孙中找，找到的是p标签
等价于$("div p")



6.筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1")  // filter是从结果中过滤出有c1样式类的
等价于 $("div.c1")



7.补充(跟筛选器一样的，不过改写成了方法而已)
.first() // 获取匹配的第一个元素
.last()  // 获取匹配的最后一个元素
.not()   // 从匹配元素的集合中删除与指定表达式匹配的元素
.has()   // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()    // 索引值等于指定值的元素

例如：
$("li:first");  //找到第一个li标签
等价于
$("li").first();  //找到第一个li标签



三、综合例子
例1：自定义模态框，使用jQuery实现弹出和隐藏功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JQ模态框示例</title>
    <style type="text/css">
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 199;
        }

        .model {
            width: 400px;
            height: 300px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top:-150px;
            margin-left:-200px;
            z-index:1999;
        }

        .hide {
            display:none;
        }

        .close {
            position: absolute;
            right:15px;
            top:15px;
            cursor:pointer;
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
<div>
    <p>渡远荆门外，来从楚国游。</p>
    <p>山随平野尽，江入大荒流。</p>
    <p>月下飞天镜，云生结海楼。</p>
    <p>仍怜故乡水，万里送行舟。</p>
</div>

<button type="button" id="login">登录</button>

<!--盖板-->
<div class="cover hide"></div>

<!--点击登录后弹出的页面-->
<div class="model hide">
    <form action="">
        <p>
            <label>用户名：
                <input type="text" name="username">
            </label>
        </p>

        <p>
            <label>密码：
                <input type="password" name="password">
            </label>
        </p>
    </form>
    <!--关闭键-->
    <div class="close">x</div>
</div>

<script type="text/javascript">
    $("#login")[0].onclick=function () {
        // 去掉cover和modal的hide样式类
        $(".cover,.model").removeClass("hide");
    }

    $(".close")[0].onclick=function () {
        // 添加cover和modal的hide样式类
        $(".cover,.model").addClass('hide');
    }

</script>

</body>
</html>

模态框



例2、左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu {
            width: 234px;
        }
        .item {
            border-bottom: 1px solid white;
        }
        .title {
            background-color: #2b99ff;
            height: 50px;
            line-height: 50px;
            color: white;
            text-align: center;

        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="menu">
    <div class="item">
        <div class="title">菜单一</div>
        <div class="body hide">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
    </div>

    <div class="item">
        <div class="title">菜单二</div>
        <div class="body hide">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
    </div>

    <div class="item">
        <div class="title">菜单三</div>
        <div class="body hide">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    // 1. 找到所有有title样式的标签，给他们绑定点击事件
    var $titleEles = $(".title");
    for (var i=0;i<$titleEles.length;i++){
        $titleEles[i].onclick=function () {
            // 如果被点击要做的事儿
            // 1. 把我这个标签下面的有body样式类的标签 移除hide类
            console.log(this);  // this指的是：触发事件的当前标签;
            // 注意this是一个DOM对象
            $(this).next().removeClass('hide');
            // 2. 把其他的title标签下面的有body样式类的那个标签加上hide 类
            $(this).parent().siblings().find('.body').addClass('hide')
        }
    }

</script>
</html>