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表格 ...

随机推荐

CSS宽高背景介绍
本萌新还未毕业,在一家外包公司干了一个月,因烦恼日常琐事任务,深感外包之坑,以及上班路途艰辛,特转战erp实施,继写日常随笔,望来日屌丝逆袭,走上人生巅峰. 若有错误,请前辈指点迷津,在下谢过. &l ...
Android Studio调试手机或者安装APK的时候出现install failed test only
1.检查\app\src\main\AndroidMainfest.xml中是否有testOnly属性为true,如果有去掉或者改为false 2.检查Android Studio和gradle版本是 ...
mac 安装protobuf,并编译为java,c++,python
1.下载地址:https://code.google.com/p/protobuf/downloads/list 另外,可以查看这个链接查看中文更多内容:http://www.cnblogs.com/ ...
前后端交互实现（nginx,json,以及datatable的问题相关）
1.同源问题解决首先,在同一个域下搭建网络域名访问,需要nginx软件,下载之后修改部分配置然后再终端下cmd nginx.exe命令,或者打开nginx.exe文件,会运行nginx一闪而过, ...
JavaCC的TokenManager和Parser
TokenManager不会感知Parser的存在,这意味着TokenManager会尽量匹配足够长的终结符,而不是依据Parser的语法规则. 当被解析的文本为" @@ "时,T ...
SQLServer之创建辅助XML索引
创建辅助XML索引使用 CREATE INDEX (Transact-SQL)Transact-SQL DDL 语句可创建辅助 XML 索引并且可指定所需的辅助 XML 索引的类型. 创建辅助 XM ...
RabbitMQ广播：fanout模式
一. 消息的广播需要exchange:exchange是一个转发器,其实把消息发给RabbitMQ里的exchange fanout: 所有bind到此exchange的queue都可以接收消息,广播 ...
Redis学习笔记（5）——Redis数据持久化
出处http://www.cnblogs.com/xiaoxi/p/7065328.html 一.概述 Redis的强大性能很大程度上都是因为所有数据都是存储在内存中的,然而当Redis重启后,所有存 ...
jdk 环境变量
1. jdk安装后的目录 2.JAVA_HOME C:\Program Files\Java\jdk1.8.0_172 3.PATH %JAVA_HOME%\bin 4.CLASSPATH .;%JA ...
文本分类实战（十）—— BERT 预训练模型
1 大纲概述文本分类这个系列将会有十篇左右,包括基于word2vec预训练的文本分类,与及基于最新的预训练模型(ELMo,BERT等)的文本分类.总共有以下系列: word2vec预训练词向量 te ...

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

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

随机推荐

热门专题