前端开发—jQuery

jquery简介

  

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

注意事项:

  一定要先导入后使用。

基础语法:

  $(selector).action()
jQuery对象与JS原生对象:

查找标签

基本选择器

id选择器:

$("#id")

标签选择器:

$("tagName")

class选择器:

$(".className")

配合使用:

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器:

$("*")

组合选择器:

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

层级选择器:

x和y可以为任意选择器

$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本筛选器:

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子:

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

练习:

自定义模态框,使用jQuery实现弹出和隐藏功能。

jQuery版自定义模态框

属性选择器:

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例子:

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type=‘checkbox‘]");// 取到checkbox类型的input标签
$("input[type!=‘text‘]");// 取到类型不是text的input标签

表单筛选器

:text
:password:file
:radio
:checkbox
:submit
:reset
:button

例子:

$(":checkbox")  // 找到所有的checkbox

表单对象属性:

:enabled
:disabled
:checked
:selected

例子:

找到可用的input标签

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

找到被选中的option:

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

小BUG

下一个元素:

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2"

链式查找

上一个元素:

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素:

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。

儿子和兄弟元素:

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

补充:

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

示例:左侧菜单

左侧菜单栏

  

操作属性样式

模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery%20v3.41.js"></script>
    <style>
        .cover  {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128,128,128,0.4);
            z-index: 1;
        }
        .model {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 200px;
            margin-left: -200px;
            margin-top: -100px;
            background-color: white;
            z-index: 2;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<button id="show">出来吧模态框</button>

<div class="cover hide"></div>
<div class="model hide">
    <p>username: <input type="text"></p>
    <p>passwod: <input type="password"></p>
    <button id="cancal"> 代表人类消灭你</button>
</div>
<script>
    let b1Ele=$(‘#show‘)[0];
    let d2Ele=$(‘.cover‘);
    let d3Ele=$(‘.model‘);
    let b2Ele=$(‘#cancal‘)[0];

    b1Ele.onclick=function () {
        d2Ele.removeClass(‘hide‘);
        d3Ele.removeClass(‘hide‘);
    };
    b2Ele.onclick=function () {
        d2Ele.addClass(‘hide‘);
        d3Ele.addClass(‘hide‘);
    }
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/guanchao/p/10970749.html

时间: 2024-10-08 05:16:01

前端开发—jQuery的相关文章

10个极客Web前端开发jquery资源大荟萃

1.基于TweenMax.js的网页幻灯片 今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮. 在线演示 源码下载 2.pagePiling.js - 创建漂亮的全屏滚动效果 全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果. 在线演示 源码下载 3.使用 CSS3 伪元素实现立体的照片堆叠效 CSS3 里引入的伪元素

Web前端开发——JQuery基础梳理

JQuery是由美国人John Resig于2006年创建的一个开源项目,随着人们的熟知,越来越多的程序高手加入其中, 完善和壮大其项目内容:如今已发展成为JavaScript.CSS.DOM.AJAX于一体的强大框架体系.jQuery是一个兼容多 浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多). 下面先用一张图总体概括一下. 下面对JQuery一些基础知识介绍一下. 1.$ 在JQuery中使用最多的莫过于"$"了,无论是页面元素

前端开发 - jQuery

本节内容 一.jQuery概述 二.选择器 三.操作DOM 四.修改DOM结构 五.事件 六.动画 七.AJAX(待续) 八.扩展(待续) 一.jQuery概述 jQuery 是一个 JavaScript 库, 极大地简化了 JavaScript 编程,是JavaScript世界中使用最广泛的一个库 jQuery特点 消除浏览器差异:你不需要自己写冗长的代码来针对不同的浏览器来绑定事件,编写AJAX等代码: 简洁的操作DOM的方法:写$('#test')肯定比document.getElemen

前端开发 - JQuery - 中

十四.jquery属性操作 attr prop 十五.jquery属性操作 class 值 十六.操作input中的value值 十七.jquery文档操作 十八.jquery位置操作 十九.仿淘宝导航栏案例 二十.jquery常用筛选方法 二十一.选项卡嵌套 二十二.小米官网案例 二十三.焦点轮播图 二十四.动态实现轮播图 原文地址:https://www.cnblogs.com/alice-bj/p/9031592.html

Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员.全栈工程师.架构师.jQuery是互联网上最流行的JavaScript框架.本书的目标是希望读者成为Web高级开发人员,无论起点如何.本书深入介绍了整个jQuery框架,此外还专门深入介绍了插件编程,以及一些扩展开发工具和框架,比如Bower和QUnit,当然还有经典的开发实战原则.每个API方法都使用了简明扼要的语法块来描述参数和返回值. <jQuery实战>(第三版)涵盖了从简单入门(如何在网页中引入jQuery)到高级开发的内容,

《JavaScript &amp;amp; jQuery交互式Web前端开发》之JavaScript基础指令

       在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序.     在開始学习后面章节中的更复杂的概念之前,我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序. 语言: 语法结构 不论什么新的语言都一样,都要学习它们的新词汇(词汇表),以及将这些词汇

转:精美jQuery插件及源码 前端开发福利

原文来自于:http://www.html5tricks.com/pretty-jquery-plugin.html jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQuery插件提供源代码下载,希望对你有所帮助. 1.jQuery自定义下拉框选择列表 5款炫酷样式 这是一款基于jQuery的自定义下拉框选择列表插件,利用这款jQuery插件我们可

前端开发不容错过的jQuery图片滑块插件(转)

作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQuery多图并列焦点图插件 这是一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示.和其他jQuery焦点图一样,这款焦点图插件的图片下方也有一排小按钮,可以任意切换图片.另外,每张图片也都有文字描述. 在线演示  /  源码下载 2.j

JavaScript &amp; jQuery交互式Web前端开发

这篇是计算机中网络编程javascript类的优质预售推荐<JavaScript & jQuery交互式Web前端开发>. 内容简介 欢迎选择一种更高效的学习JavaScript和jQuery的方式. 你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本,但想以一种更好的方式来实现它们?本书非常适合您.本书不仅向您展示如何阅读和编写JavaScript代码,同时还会以一种简单且视觉化的方式,教您有关计算机编程的基础知识.阅读本书之前,您只需要对HTML和CSS