前端之JQuery：JQuery基本语法
jQuery基本语法
一、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介绍
- 版本
- 1.x
兼容IE8。。。
- 3.x
最新
- .min.xx
压缩的：生产环境用
- 没有压缩的（没有.min.xx）：开发用
6、 jQuery知识点
html:裸体的人
css:穿了衣服的人
JS：让人动起来
7、选择器：
1、基本选择器
- ID选择器 $("#id的值")
- 类选择器（class） $(".class的值")
- 标签选择器(html标签) $("标签的名字")
- 所有标签 $("*") - 组合选择器 $("xx,xxx")
2、层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙")
- 从一个标签的儿子里面找 $("父亲>儿子标签")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签")
- 找后面所有同级的 $("标签~兄弟") 8、jQuery对象：
- 用jQuery选择器查出来的就是jQuery对象
- jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法 - DOM对象和jQuery对象转换：
- $(".c1")[0] --> DOM对象
- $(DOM对象)
9、筛选器
- 写在引号里面的
基本筛选器
$(" :first") 找第一个
$(" :not('')") 不是/非
$("#i1>input":not('.c1,.c2'))
$(" :even") 偶数
$(" :odd") 奇数
$(" :eq(index)") 找等于index的
$(" :gt(index)") 找大于index的
$(" :lt(index)") 找小于index的
$(" :last") 最后一个
$(" :focus") 焦点
内容==========
$(" .c1:contains('我是第一个')") 包含文档的内容的标签
$(" :empty") 标签内容为空的
$(" :has('')") 包含标签的标签
$(" :parent") 找有孩子的父亲
$("#i7").parent() 找i7的父亲 可见性========
$(" :hidden") 找到隐藏的
$(" :visible") 找不隐藏的，也就是显示的
属性==========
input[name] --> 找有name属性的input
input[type='password'] --> 类型是password的input标签
表单==========
:input
:password
:checkbox
:radio
:submit
:button
:image
:file 表单对象属性=========
:enable 可选的
:disable 不可选
:checked 选中的
:selected 下拉框选中
- 写在信号外面当方法用的
过滤===========
$("").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>
前端之JQuery：JQuery基本语法的更多相关文章
- 前端（jQuery）（1）-- JQuery简介及语法
1.jQuery库简介 1.1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中 1.2.什么是jQuery: jQuery是一个JavaScript函数库(由于底层封装的问题,不需 ...
- 前端学习之jquery/下
前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...
- 前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
- 前端基础之:JQuery(可编辑版)
前端基础之jquery 一 jQuery是什么? ［1］ jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］ ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
- 前端基础 之 jQuery
浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...
- 前端(5)之jQuery
前端(5)之jQuery jQuery介绍 1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现 ...
- 前端第四篇---前端基础之jQuery
前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
- web前端基础知识 jQuery
通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript ...
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
随机推荐
- 003-unity3d 物理引擎-示例2 打箱子
一.基础知识点 1.坐标.向量等 )) { //1.将鼠标坐标 转化为 世界坐标 由于鼠标z轴 可能不存在,故自定义为3 Vector3 targetPos = Camera.main.ScreenT ...
- 阶段3 1.Mybatis_03.自定义Mybatis框架_7.自定义Mybatis的编码-实现基于注解配置的查询所有
注解的方式,这里进行修改.上面注释的是原来xml的方式. 在dao类里面加上注解 创建注解类 声明注解的生命周期为Runntime 改变注解出现的位置,在Mehtod方法上 写完之后这里就不报错了. ...
- 5.2.k8s.Secret
#Secret Secret存储密码.token.密钥等敏感数据 Secret以Volume或环境变量方式使用 #Secret类型 Opaque : base64 编码格式的 Secret kuber ...
- Delphi中TQuery.Filter用法
今天维护一个老项目是用delphi5 + BDE写的.为了更方便查询数据,就增加一个查询功能.由于数据量查询出来后就比较少,于是就想到Filter like 但 BDE并不支持 Filter = 'n ...
- ARTS挑战
最近有点迷茫,感觉自己工作了一年多,技术成长有限,我要做出改变.2019年11月2日,就从今天开始,参加耗子叔的ARTS挑战. ARTS的初衷 Algorithm:主要是为了编程训练和学习.每周至少做 ...
- HTML5——新表单元素 表单属性 语义元素
表单元素 新的表单元素 datalist——输入域选项列表 keygen——提供一种验证用户的可靠方法 output——不同类型的输出,比如计算或脚本输出 表单属性 <form> / &l ...
- Katalon Studio学习笔记(三)——chromedriver与当前chrome版本不符，如何替换
首先下载chrome版本对应的chromedriver.exe文件,然后找到katalon如下图所示文件夹中,替换chromedriver.exe重新启动katalon即可. 最新适配chrome 7 ...
- Spoj375 Qtree--树链剖分
Spoj375 Qtree给一棵共有 n(n · 10000) 个结点的树, 每条边都有一个权值, 要求维护一个数据结构, 支持如下操作: 1. 修改某条边的权值; 2. 询问某两个结点之间的唯一通路 ...
- kafka学习(五)
kafka可靠的数据传递 kafka可靠性保证 ACID 是关系型数据库保证数据的规范,指的是原子性,一致性,隔离性和持久性,这是数据库给出的可靠性保证. kafka给出的保证是什么? 1.k ...
- [Git] 019 merge 命令的补充
回顾:[Git] 017 加一条分支,享双倍快乐 的 "2.3" 1. "Fast-forward" "Git" 在合并分支时会尽可能地使用 ...