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. Java中stream的详细用法

    来自于:Java 8 stream的详细用法_旅行者-CSDN博客_java stream 一.概述 Stream 是 Java8 中处理集合的关键抽象概念,它可以指定你希望对集合进行的操作,可以执行 ...

  2. Java中的多线程你只要看这一篇就够了(引用)

    引 如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现.说这个 ...

  3. ASP.NET Core 6框架揭秘实例演示[03]:Dapr初体验

    也许你们可能没有接触过Dapr,但是一定对它"有所耳闻",感觉今年它一下子就火了,一时间很多人都在谈论它.我们从其命名(Dapr的全称是"分布式应用运行时Distribu ...

  4. Solution -「多校联训」神

    \(\mathcal{Description}\)   Link.   给定 \(n\) 阶排列 \(a\),\(q\) 次询问,每次给出 \(1\le l_1\le r_1<l_2\le r_ ...

  5. ESXI 7.0.0 U2 部署

    文章目录 什么是ESXI? ESXi 的优势 功能特性 部署ESXI 创建虚拟机 开始安装 打开浏览器输入ip进行管理 什么是ESXI? ESXI官网:https://www.vmware.com/c ...

  6. Redis 中常见的集群部署方案

    Redis 的高可用集群 前言 几种常用的集群方案 主从集群模式 全量同步 增量同步 哨兵机制 什么是哨兵机制 如何保证选主的准确性 如何选主 选举主节点的规则 哨兵进行主节点切换 切片集群 Redi ...

  7. 【一天一个小知识10/20】Unity安卓获取麦克风并录音保存。

    2021-10-20 10:42:16 #region 模块信息 // **************************************************************** ...

  8. 数据分析六个步骤,一款BI工具即可全部搞定

    数据分析是将大量的数据转化为有价值的信息,以求最大化地利用数据的功能,发挥数据的作用.数据分析的类型可以分为现状分析.原因分析.预测分析,按流程分为以下6个步骤: (1) 明确数据分析目的和思路 明确 ...

  9. 使用教程:宝塔服务器管理助手Linux面版

    网页提示:宝塔Linux面板初始化成功,点击登陆页面:直接使用初始化配置时填写的帐号及密码登陆面板功能:网站管理.FTP管理.数据库管理.系统安全.文件管理.计划任务.环境设置. 方法/步骤1: 使用 ...

  10. Java中读写锁的介绍

    读写锁的简单介绍 所谓的读写锁,就是将一个锁拆分为读锁和写锁两个锁,然后你加锁的时候,可以加读锁,也可以加写锁. ReentrantLock lock=new ReentrantLock(); loc ...