一、jQuery基础
1.为什么要用jquery?
写起来简单,省事,开发效率高,兼容性好
2、什么是jQuery?
jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)
3、如何使用jQuery?
1、导入 <script src="jquery-3.2.1.js"></script>
或者<script src="jquery-3.2.1.min.js"></script>
2、语法规则:$("")
4、JS和jQuery的区别?
jQuery就是用JS写的
js是基础,jQuery是工具
5、jQuery介绍
- .min.xx
压缩的:生产环境用
- 没有压缩的(没有.min.xx):开发用
6、 jQuery知识点
  html:裸体的人
  css:穿了衣服的人
   JS:让人动起来
7、选择器:

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
8、jQuery对象:
- 用jQuery选择器查出来的就是jQuery对象
- jQuery对象,他就可以使用jQuery方法,不能使用DOM的方法 - DOM对象和jQuery对象转换:
- $(".c1")[0] --> DOM对象
- $(DOM对象)

9、筛选器
- 写在引号里面的
  基本筛选器
: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实现弹出和隐藏功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义模态框</title>
<style>
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgrey;
z-index: 999;
}
.modal {
width: 600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="弹" id="i0"> <div class="cover hide"></div>
<div class="modal hide">
<label for="i1">姓名</label>
<input id="i1" type="text">
<label for="i2">爱好</label>
<input id="i2" type="text">
<input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var tButton = $("#i0")[0];
tButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0]; $(coverEle).removeClass("hide");
$(modalEle).removeClass("hide");
}; var cButton = $("#i3")[0];
cButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0]; $(coverEle).addClass("hide");
$(modalEle).addClass("hide");
}
</script>
</body>
</html>

jQuery版自定义模态框

  内容
$(" .c1:contains('我是第一个')") 包含文档的内容的标签
$(" :empty") 标签内容为空的
$(" :has('')") 包含标签的标签
$(" :parent") 找有孩子的父亲
$("#i7").parent() 找i7的父亲 可见性
$(" :hidden") 找到隐藏的
$(" :visible") 找不隐藏的,也就是显示的  属性选择器:
[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
- 写在引号外面当方法用的
过滤===========
$("").first() 找第一个
$("").parent() 找父亲
$("").eq(index) 找等于index的
.hasClass() 判断有没有某个类的
查找
.children() 找孩子
.find() 查找
.next() 下面的
.nextAll() 下面所有的
.nextUntil() 找下面的直到找到某个标签为止 .parent() 找父亲
.parents() 找所有的父亲
.parentsUntil() 直到找到你要找的那个父亲为止 .prev() 上面的
.prevAll() 上面的所有
.prevUntil() 上面的直到找到某个标签为止 .siblings() 所有的兄弟

- toggleClass()  切换|开关:有就移除,没有就添加

- addClass("hide")  添加类

- removeClass("hide") 删除类

以下需要注意的几个图片
(1)

(2)

(3)

(4)

二、练习题

答案

三、开关示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关</title>
<style>
.c1{
width: 200px;
height: 200px;
border :1px solid grey;
border-radius: 50%;
display: inline-block;
}
.c2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1"></div>
<button class="btn">点击我</button>
<script src="jquery3_0_0.js"></script>
<script>
// 找到button添加事件
$(".btn").on('click',function () {
//当点击的时候让变色
$(".c1").toggleClass('c2')
}); </script>
</body>
</html>

web前端----jQuery基础语法的更多相关文章

  1. Web前端JQuery基础

    JQuery知识汇总 一.关于Jquery简介          jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...

  2. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

  3. Web前端-Ajax基础技术(上)

    Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...

  4. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  5. jQuery 基础语法

    jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  6. Web前端JQuery面试题(二)

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  7. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  8. Web前端开发基础 第一天(Html和CSS)

    学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...

  9. 网络统计学与web前端开发基础技术

    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...

随机推荐

  1. PAT甲1031 Hello World for U【字符串】

    1031 Hello World for U (20 分) Given any string of N (≥5) characters, you are asked to form the chara ...

  2. NEFU 118 - n!后面有多少个0 & NEFU 119 - 组合素数 - [n!的素因子分解]

    首先给出一个性质: n!的素因子分解中的素数p的幂为:[ n / p ] + [ n / p² ] + [ n / p³ ] + …… 举例证明: 例如我们有10!,我们要求它的素因子分解中2的幂: ...

  3. Java异常的优势与缺陷,及其处理原则

    最近在做一个读取数据库元数据的框架,其中的数据库的检查异常让人印象深刻.try-catch简直让人抓狂,同时作为框架哪些异常时应该抛出来给调用人员,哪些是应该自己处理掉的,抛出来的异常时检查异常还是非 ...

  4. 在浏览器地址栏输入一个URL后回车,将会发生的事情?

    https://yq.aliyun.com/articles/20667

  5. 【Git 使用笔记】第一部分:安装git 和 使用git

    第一部分:安装git(本人使用ubuntu系统) sudo apt-get install git 第二部分:基本配置 git config core.filemode false//忽略文件属性的修 ...

  6. Effective Java 目录

    <Effective Java>目录摘抄. 我知道这看起来很糟糕.当下,自己缺少实际操作,只能暂时摘抄下目录.随着,实践的增多,慢慢填充更多的示例. Chapter 2 Creating ...

  7. javaScript高级教程(五) Event Flow

    1.两个阶段三个模型:Netscape支持事件捕获,IE支持事件冒泡,w3c是先捕获后冒泡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S ...

  8. 第四课:通过配置文件获取对象(Spring框架中的IOC和DI的底层就是基于这样的机制)

    首先在D盘创建一个文件hero.txt,内容为:com.hero.Hero(此处必须是Hero的完整路径) 接下来是Hero类 package com.hero; public class Hero ...

  9. iOS连续上传多张图片

    参考地址:http://www.cocoachina.com/ios/20180730/24366.html 需求是怎样的:for 循环里面.多个网络请求上传图片,每次上传一张,至于为什么每次只上传一 ...

  10. linux上mysql安装详细教程

    所有平台的MySQL下载地址为: MySQL 下载. 挑选你需要的 MySQL Community Server 版本及对应的平台. MySQL - MySQL服务器.你需要该选项,除非你只想连接运行 ...