1. jQuery是什么?是一个轻量级的,兼容多浏览器的JS库(write less, do more)

1. 是一个工具,简单方便的实现一些DOM操作

2. 不用jQuery完全可以,但是不明智。

3. jQuery能做的事儿

1. 查找标签

2. 修改样式

3. 事件

4. AJAX (Django中讲)

5. 插件机制

4. jQuery是一个类库,类似于Python中的模块

A、使用时将相关文件(.js)拖进html文件中 <script src="jquery-3.3.1.min.js"></script>

B、想要使用jQuery,一定要先导入再使用!!!

C、jQuery == $ (使jQuery更简洁)

    

5. 初识jQuery(更简洁)

# 用DOM实现对样式进行更改

# 导入jQuery,用jQuery实现对样式进行更改

2. jQuery版本

官网:https://jquery.com

  1. 压缩版和未压缩版的区别 (两者实现的功能是一致的,压缩版的size更小;有上线需求的时候用压缩版,在开发过程中(可能需要查看源码)时用未压缩版)

    

2. 1.x和3.x都可以使用 (1.x兼容ie678,目前主要维护的是3.x)

3. jQuery的内容

用jQuery方法找标签后得到的是jQuery对象,jQuery对象[index],转成DOM对象

用DOM方法找标签后得到的是DOM对象,$(DOM对象),转成jQuery对象

约定:在声明一个jQuery对象变量时在变量名前加$

Ps(补充):

A、 p标签不能套div标签(硬套的话,前面和后面的p自动加闭合)

B、 label与input连用的两种方式(如果单写一个input飘黄;加上label后,在鼠标在页面上点击label相应的input-text有反应)

<!--方式一-->

<label>username

    <input type="text">

</label>

<!--方式二-->

<label for="i1">password</label>

<input type="password" id="i1">

C、li{$$$}*5 + Tab

<li>001</li>

<li>002</li>

<li>003</li>

<li>004</li>

<li>005</li>

基本的语法:(找标签).(要做的事儿)

      $(selector).action()

  1. 找标签(大体上同CSS)

A、 选择器

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标签

$(“#my-checkbox input: not(:checked)”)

      属性选择器

[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
 

      

表单对象例子:

<form>

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

  <input name="id" />

</form>

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

<select id="s1">

  <option value="beijing">北京市</option>

  <option value="shanghai">上海市</option>

  <option selected value="guangzhou">广州市</option>

  <option value="shenzhen">深圳市</option>

</select>

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

B、 筛选器

下一个元素:

$("#id").next()

$("#id").nextAll()

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

上一个元素:

$("#id").prev()

$("#id").prevAll()

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

父亲元素:

$("#id").parent()

$("#id").parents()  // 查找当前元素的所有的父辈元素

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

儿子和兄弟元素:

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

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

查找元素:

$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

补充:

.first()// 获取匹配的第一个元素

.last()// 获取匹配的最后一个元素

.not()// 从匹配元素的集合中删除与指定表达式匹配的元素

.has()// 保留包含特定后代的元素,去掉那些不含有指定后代的元素。

      

jQuery版的模态框

jQuery版的模态框
  1. jQuery支持链式调用
    1. 链式调用的原理:调用一个实例化方法返回的是当前的实例对象
jQuery支持链式调用

3. 操作标签的样式

1. 直接改

2. 通过class名去改

addClass();// 添加指定的CSS类名。

removeClass();// 移除指定的CSS类名。

hasClass();// 判断样式存不存在

toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。

    

      

6月4日 python学习总结 初次接触jQuery的更多相关文章

  1. 4月2日 python学习总结

    昨天内容回顾: 1.迭代器 可迭代对象: 只要内置有__iter__方法的都是可迭代的对象 既有__iter__,又有__next__方法 调用__iter__方法==>得到内置的迭代器对象 调 ...

  2. 4月8日 python学习总结 模块与包

    一.包 #官网解释 Packages are a way of structuring Python's module namespace by using "dotted module n ...

  3. 4月12日 python学习总结 继承和派生

    一.继承 什么是继承:   继承是一种新建类的方式,在python中支持一个子类继承多个父类   新建类称为子类或派生类   父类可以称之为基类或者超类   子类会遗传父类的属性 2.  为什么继承 ...

  4. 4月11日 python学习总结 对象与类

    1.类的定义 #类的定义 class 类名: 属性='xxx' def __init__(self): self.name='enon' self.age=18 def other_func: pas ...

  5. 5月31日 python学习总结 JavaScript概述

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  6. 6月15日 python学习总结 Django模板语言相关内容

    Django模板语言相关内容   Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} ...

  7. 6月11日 python学习总结 框架理论

    Web框架本质及第一个Django实例   Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web ...

  8. 4月3日 python学习总结

    1. 列表生成器 l=['egg%s' %i for i in range(100) if i>20 ] print(l) 若将 [ ] 换成 ( ),则为生成器表达式,结果是一个迭代器 #求文 ...

  9. 5月14日 python学习总结 视图、触发器、事务、存储过程、函数、流程控制、索引

    一.视图 1.什么是视图 视图就是通过查询得到一张虚拟表,然后保存下来,下次用的直接使用即可 2.为什么要用视图 如果要频繁使用一张虚拟表,可以不用重复查询 3.如何用视图 create view t ...

随机推荐

  1. MindSpore多元自动微分

    技术背景 当前主流的深度学习框架,除了能够便捷高效的搭建机器学习的模型之外,其自动并行和自动微分等功能还为其他领域的科学计算带来了模式的变革.本文我们将探索如何用MindSpore去实现一个多维的自动 ...

  2. Solution -「CERC 2016」「洛谷 P3684」机棚障碍

    \(\mathcal{Description}\)   Link.   给一个 \(n\times n\) 的网格图,每个点是空格或障碍.\(q\) 次询问,每次给定两个坐标 \((r_1,c_1), ...

  3. 「codeforces - 1284G」Seollal

    给定 \(n\times m\) 的网格图,有些格子有障碍,无障碍且相邻的格子之间连边形成图.保证 \((1, 1)\) 无障碍,保证无障碍格子连通. 将网格图黑白染色,相邻格子颜色不同,\((1, ...

  4. 如何强制关闭Win10自动更新

    今天我向往常一样打开了电脑,在工作时突然感觉CPU风扇嗡嗡的响电脑开始变得极慢内存也开始上涨,我意识到不妙了,Windows10 又开始在后台给我搞事情了,由于我的电脑安装有开机还原功能,所以每次开机 ...

  5. 痞子衡嵌入式:介绍i.MXRT定时器PIT的多通道链接模式及其在coremark测试工程里的应用

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT定时器PIT的多通道链接模式及其在coremark测试里的应用. 早在 2018 年 i.MXRT 系列跨界处理器刚推出的时 ...

  6. 依赖于angular的table组件

    组件实现了以下功能 1. 列宽可动态拖动 2. 列数据排序 3. 列过滤 4. 列位置自由调整 除了需要引入angular.js(我用的是1.4.6版本),还需要引用一个angular衍生出来的插件n ...

  7. ASP.NET Core 6框架揭秘-实例演示版[持续更新中…]

    作为<ASP.NET Core 3框架揭秘>的升级版,<ASP.NET Core 6框架揭秘>提供了很多新的章节,同时对现有的内容进行大量的修改.虽然本书旨在对ASP.NET ...

  8. vulhub漏洞环境

    0x00 vulhub介绍 Vulhub是一个基于docker和docker-compose的漏洞环境集合,进入对应目录并执行一条语句即可启动一个全新的漏洞环境,让漏洞复现变得更加简单,让安全研究者更 ...

  9. C#爬虫(04):HtmlAgilityPack解析html文档

    原文链接 https://www.cnblogs.com/springsnow/p/13278283.html 目录 一.爬虫概述 1.使用浏览器获取页面源码 2.HTML解析组件 二.HtmlAgi ...

  10. Docker-可视化管理工具总结-推荐使用Portainer

    对于初学docker的小白,一款好的可视化工具有助于快速掌握docker基本形态和概念,下面针对docker可视化工具做些总结 ui-for-docker UI For Docker是一个使用Dock ...