jquery基本语法（一）
https://www.cnblogs.com/haiyan123/p/7657151.html
一、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") 焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div> <a href="">click</a> <p id="p1" alex="sb">pppp</p>
<p id="p2" alex="sb">pppp</p>
<div class="outer">outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p> <ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul> <input type="text">
<input type="checkbox">
<input type="submit"> <script src="jquery-3.1.1.js"></script>
<script>
//基本选择器
//$("div").css("color","red")
//$("*").css("color","red")
//$("#p1").css("color","red") //$(".outer").css("color","red") // $(".inner,p,div").css("color","red") //层级选择器 //$(".outer p").css("color","red")
//$(".outer>p").css("color","red")
//$(".outer+p").css("color","red")
//$(".outer~p").css("color","red") //基本筛选器 //$("li:first").css("color","red")
// $("li:eq(0)").css("color","red")
//$("li:gt(2)").css("color","red")
//$("li:lt(2)").css("color","red") //属性选择器
// $("[alex='sb'][id='p1']").css("color","red") //表单选择器
//$("[type='text']").css("width","200px")
//$(":text").css("width","400px") </script>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <a href="">click</a> <p id="p1" alex="sb">pppp</p>
<p id="p2" alex="sb">pppp</p> <div class="outer">outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p> <ul>
<li class="begin">1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>4444</li>
<li id="end">4444</li>
<li>4444</li>
</ul> <input type="text">
<input type="checkbox">
<input type="submit"> <script src="jquery-3.1.1.js"></script>
<script>
//筛选器
//$("li").eq(2).css("color","red");
//$("li").first().css("color","red");
//$("li").last().css("color","red"); //查找筛选器 //$(".outer").children("p").css("color","red");
//$(".outer").find("p").css("color","red"); //$("li").eq(2).next().css("color","red");
//$("li").eq(2).nextAll().css("color","red");
//$("li").eq(2).nextUntil("#end").css("color","red"); //$("li").eq(4).prev().css("color","red");
//$("li").eq(4).prevAll().css("color","red");
//$("li").eq(4).prevUntil("li:eq(0)").css("color","red"); //console.log($(".outer .inner p").parent().html())
//$(".outer .inner p").parents().css("color","red");
//$(".outer .inner p").parentsUntil("body").css("color","red"); $(".outer").siblings().css("color","red") </script>
</body>
</html>
筛选器
内容==========
$(" .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") 删除类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
background-color: aqua;
}
.c2 {
background-color: yellow;
}
</style>
</head>
<body> <div class="c1"></div>
<button class="btn">click</button> <script src="jquery-3.3.1.js"></script>
<script>
$(".btn").on('click',function () {
$(".c1").toggleClass("c2");
});
</script> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
float: left;
background-color: beige;
width: 30%;
height: 500px;
}
.content{
float: left;
background-color: rebeccapurple;
width: 70%;
height: 500px;
}
.title{
background-color: aquamarine;
line-height: 40px;
}
.hide{
display: none;
}
</style>
</head>
<body> <div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div> <div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div> <div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div> </div>
<div class="content"></div>
</div> <script src="jquery-3.3.1.js"></script>
<script>
function show(self) {
$(self).next().removeClass("hide");
$(self).parent().siblings().children(".con").addClass("hide");
}
</script>
</body>
</html>
menu
jquery基本语法（一）的更多相关文章
- jQuery 基础语法
jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
- js进阶 10-2 JQuery基础语法是什么
js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...
- 前端之JQuery：JQuery基本语法
jQuery基本语法 一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似py ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
- JQuery基本语法（部分）
1.jQuery介绍 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScrip ...
- web前端----jQuery基础语法
一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...
- <学习笔记 之 JQuery 基础语法>
jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...
- jQuery基本语法
jQuery 是 JavaScript 的一个函数库.方便.主流 jQuery的开发步骤: (1) 导入jQuery 库 (2) 在 <script src="../js/j ...
- jQuery 选择器语法
jQuery选择器分为如下几类(点击“名称”会跳转到此方法的jQuery官方说明文档): 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId&quo ...
随机推荐
- dart正则
1.前言 API中对于正则表达式的注释是:正则表达式的规范和语义与JavaScript相同详细的规范可以参考:http://ecma-international.org/ecma-262/5.1/#s ...
- elasticsearch的映射
一.简介: 映射:在创建索引时,可以预先定义字段的类型(映射类型,也就是type,一个索引可以有一个或多个类型)及相关属性. Elasticsearch会根据JSON源数据的基础类型猜测你想要的字段映 ...
- WPF当属性值改变时利用PropertyChanged事件来加载动画
在我们的程序中,有时我们需要当绑定到UI界面上的属性值发生变化从而引起数据更新的时候能够加载一些动画,从而使数据更新的效果更佳绚丽,在我们的程序中尽量将动画作为一种资源放在xaml中,而不是在后台中通 ...
- Java ME之Android开发从入门到精通
1. 搭建Android开发环境 方式一:使用ADT插件安装 ADT插件的下载与安装,ADT插件获取网址:http://www.androiddevtools.cn/ 下载好的ADT插件如图所示: 在 ...
- linux 查看TCP端口
如有转载,不胜荣幸.http://www.cnblogs.com/aaron-agu/ netstat –nat
- SELECT IDENT_CURRENT（tableName）和自增长列的纠结
项目中要用到一个功能:主表主键为自增长,要求在插入主表数据前先获得主表要插入数据的主键ID值,用在插入子表时获取主键ID.在网上搜了一下,发现SELECT IDENT_CURRENT(TableNam ...
- 使用 Travis CI 自动部署 Hexo 站点至 GitHub Pages
Hexo 与 GitHub Pages 安装配置请参考:Hexo 与 GitHub Pages 本文源码与生成的静态文件在同一项目下,源码在 source 分支,静态文件在 master 分支 新增 ...
- 吴恩达deeplearning之CNN—卷积神经网络
https://blog.csdn.net/ice_actor/article/details/78648780 个人理解: 卷积计算的过程其实是将原始的全连接换成了卷积全连接,每个kernel为对应 ...
- tomcat9 点击bin目录下的startup.bat一闪而过
我装的是tomcat9免安装版,jdk版本是11,之后去tomcat bin目录下点击startup.bat闪退(好吧,只有想办法解决了) 博客中的解决办法五花八门,什么环境变量没配好....不过都不 ...
- C#常忘语法笔记（C#程序设计基础1-4章）
1.1 const:声明一个常量 1.2强转: double->int eg1: int i=(int)3.0; eg2: double d=3.0; int i=(int)d+1; strin ...