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

一、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().toggleClass('hide');

        }

    }

</script>

</html>

左侧菜单

jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)的更多相关文章

jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性
使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...
jQuery-介绍加载选择器样式操作属性操作绑定click事件
jQuery - 介绍加载选择器样式操作属性操作绑定click事件注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
19 01 13 JQery 加载选择器样式操作
在Javascript 中应该用下方法经行编辑 <script type="text/javascript" src="js/jquery-1.12.4.min ...
jQuery点击弹出层，弹出模态框，点击模态框消失
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
jquery学习：选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
jQuery入门教程-CSS样式操作大全
1.获取样式 2.设置样式 3.追加样式 4.移除样式 5.重复切换anotherClass样式 6.判断是否含有某项样式 7.设置 CSS 属性参数描述 name 必需.规定 CSS 属性的名称 ...
bootstrap table编辑操作的时候在模态框里加载iframe页面（加载的页面是在另一个页面做编辑）的时候如何关闭模态框和刷新table
//关闭模态框 window.parent.$('#myModal').modal('hide'); //修改成功后刷新table表格 ...

随机推荐

关于ipv6被拒的问题
遇到ipv6被拒,你首先要搭建一个ipv6的环境,进行测试一下,如果在ipv6环境下没有问题,那你就可以再次直接提交,或者重新打包提交.再次提交的时候,你可以录制一段在ipv6环境下运行的一段视频上 ...
【公众号系列】SAP的新零售
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[公众号系列]SAP的新零售写在前面还是 ...
go语言打造个人博客系统(二)
go语言打造个人博客系统(二) 在上篇文章go语言打造个人博客系统(一)中,我们了解了go语言的优点和go语言的数据库操作,本次我们会完成博客系统的后端开发. 博客系统后端接口开发路由测试 ht ...
SQL Server -- 回忆笔记（五）：T-SQL编程，系统变量，事务，游标，触发器
SQL Server -- 回忆笔记(五):T-SQL编程,系统变量,事务,游标,触发器 1. T-SQL编程 (1)声明变量 declare @age int (2)为变量赋值 (3)while循环 ...
微信小程序测试方法总结
最近的新项目是小程序加web端后台管理主要找了些文章方便自己使用也分享给大家: 小程序官方文档 https://developers.weixin.qq.com/miniprogram/design ...
LeetCode算法题-Design HashSet（Java实现）
这是悦乐书的第298次更新,第317篇原创 01 看题和准备今天介绍的是LeetCode算法题中Easy级别的第166题(顺位题号是705).不使用任何内建的hash表库设计一个hash集合,应包含 ...
LeetCode算法题-Binary Number with Alternating Bits（Java实现）
这是悦乐书的第292次更新,第310篇原创 01 看题和准备今天介绍的是LeetCode算法题中Easy级别的第160题(顺位题号是693).给定正整数,检查它是否具有交替位:即它的二进制数的任意两 ...
IDEWorkspaceChecks.plist文件是干什么用的？
在提交PR的时候,无意间发现了在xcworkspace/xcshareddata中多了一个名为IDEWorkspaceChecks.plist的文件.自己并没有手动创建此文件,在网上查了一下,最终对其 ...
英语口语练习系列-C08-考试
<蒹葭>-诗经蒹葭苍苍,白露为霜.所谓伊人,在水一方.溯洄从之,道阻且长.溯游从之,宛在水中央. 蒹葭萋萋,白露未晞.所谓伊人,在水之湄.溯洄从之,道阻且跻.溯游从之,宛在水中坻. 蒹葭 ...
Python基础之协程
阅读目录一引子二协程介绍三 Greenlet模块四 Gevent模块引子之前我们学习了线程.进程的概念,了解了在操作系统中进程是资源分配的最小单位,线程是CPU调度的最小单位. 按道 ...

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

jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)的更多相关文章

随机推荐

热门专题