jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、
this指的是原生js的DOM对象
.css(“”):只写一个值是取值,写俩值是赋值
window.onload === $(document).ready();
$(“”):获取元素 标签名、.类名、#id
jQuery特点
- 链式编程
- jq.shou(3000).html(内容)
- 相当于
- jq.shou(3000)
- jq.gtml(内容)
- 隐式迭代
- 隐式实用for循环、迭代
如何使用jQuery
- 引包
- 一定要在使用之前
- <script src = ‘’><>
- 入口函数
- $(document).ready(function({}))
- 绑定时间
- 事件源.事件(function(){事件驱动函数})
jQuery入口函数
- 文档加载完毕,图片未加载的时候执行函数
- $(document).ready(function({}))
- $(function(){})
- 文档和图片都加载完毕执行函数
- $(window).reday(function(){})
- JS入口只能有一次,多次会覆盖
- jqery可有多个入口函数
- $ === jQuery jQuery和DOM对象的区别
- jQuery对象是一个数组,包含原生jsDOM对象
- 原生js对象是一个原生对象
- jQuery对象名 = $(js对象名)
- js对象转换为jQuery对象
- jquery对象名[索引值]
- jquery对象名.get(wwm索引值)
- 不同的对象有不同的方法
- JQuery对象方法包含原生js对象方法.
- jQuery对象.length的返回值是元素个数
jQuery选择器
- 基本:#id、.类、标签名、
- *通配符选择器
- 层级选择器
- 子代选择器 >
- 后代选择器 空格隔开
- 基本过滤选择器
- : eq(index)遍历元素数组
- :odd 获取偶数位索引的元素
- :even获取奇数位索引值的元素
- 筛选选择器
- find(selector):找到父元素的素所有子元素
- 父元素.find(‘要查找的子元素’)
- 查找所有后代子元素
- children:亲儿子
- 父元素.children(‘要查找的子元素’)
- 仅查找子元素
- :eq(index)
- next();下一个兄弟节点
- parent():获取该元素的父元素
- siblings:所有的兄弟节点(不包括本身)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {padding: 0;margin: 0;}
ul { list-style-type: none;} .parentWrap {
width: 200px;
text-align:center; } .menuGroup {
border:1px solid #999;
background-color:#e0ecff;
} .groupTitle {
display:block;
height:20px;
line-height:20px;
font-size: 16px;
border-bottom:1px solid #ccc;
cursor:pointer;
} .menuGroup > div {
height: 200px;
background-color:#fff;
display:none;
} </style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function () {
//需求:鼠标点击span,让他下面的div显示出来。让其他的div隐藏。
$(".parentWrap span").click(function () {
// $(this).next().show();
// //让其他的隐藏
// //点击的span的父亲li,的所有的兄弟元素li,的孩子元素div全部隐藏。
// $(this).parent("li").siblings("li").children("div").hide();
//连式编程
$(this).next().show().parent("li").siblings("li").find("div").hide();
});
})
</script>
</head>
<body>
<ul class="parentWrap">
<li class="menuGroup">
<span class="groupTitle">标题1</span>
<div>我是弹出来的div1</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题2</span>
<div>我是弹出来的div2</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题3</span>
<div>我是弹出来的div3</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</body>
</html>手风琴案例
jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、的更多相关文章
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- jQuery对象和DOM对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...
- jQuery对象与dom对象的区别与相互转换
什么是jQuery对象? 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.例如: $("#test").htm ...
- jQuery学习-----(二)JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...
- 关于jquery对象和DOM对象的区别
这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所 ...
- jquery对象和DOM对象的区别和转换
jquery对象和DOM对象的区别和转换 在使用jquery时,我们直接通过jq的选择器获取元素,然后对元素进行操作,用jq选择器获取到的对象是一个jq对象,jq对象能够使用jq提供的方法,但是不能用 ...
- jQuery对象和普通DOM对象的区别
1.DOM对象DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.根据W3C DOM规范,DOM是HTML与XML的应用编程接 ...
- 深刻了解jQuery对象和普通DOM对象的区别
深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样 ...
随机推荐
- win10+Anaconda3+CUDA9.0+CUDNN7.1+TensorFlow-gpu1.9+Pycharm
想在win10上运行下YOLO的例子,要先配置环境,折腾了两天,终于好了,整理下自己觉得有用且正确的流程. win10+Anaconda3+CUDA9.0+CUDNN7.1+TensorFlow1.9 ...
- modbus-tcp协议讲解
MODBUS功能码简介 代码 中文名称 位操作/字操作 操作数量 01h 读线圈状态 位操作 单个或多个 02h 读离散输入状态(只能读到0或1) 位操作 单个或多个 03h 读保持寄存器(保持寄存器 ...
- 单元测试python unittest
记录自己学习单元测试框架的一篇博客 菜鸟的学习之路比较艰辛到处找资料一把辛酸泪啊 1.首先是创建一个类里面设计一些简单的函数方便写用例: 原谅我蹩脚的英文直接用拼音命名了 : 2.接着就是创建用例文件 ...
- IE浏览器主页被篡改为2345,针对一般解决办法无法解决的情况
1.注册表修改 按微软键+R 输入regedit 弹出注册表.HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN 将右侧的Sta ...
- 图解SSH隧道功能
SSH能够对SSH客户端与服务器端之间的网络通信提供加密功能,而且SSH的端口转发功能还能将其它TCP端口的网络数据通过SSH连接来转发,并且自动提供相应的加密和解密服务,这一过程也被称为“隧道”(t ...
- Linux fuser工具使用方法介绍
引言 fuser是linux中较常用的工具,"fuser"——从其名称我们可以看出该工具的用途:查询给定文件或目录的用户或进程信息. 除查询文件相关信息之外,使用fuser还能向进 ...
- hadoop2.7之作业提交详解(上)
根据wordcount进行分析: import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.Path; impo ...
- Javascript中,实现十大排序方法之一(冒泡排序及其优化设想)
冒泡排序的Javascript实现 首先定义一个取值范围在(0~100000)之间的随机值的长度为10万的数组, function bubbleSort(arr) { console.time('冒泡 ...
- Python爬虫,爬取腾讯漫画实战
先上个爬取的结果图 最后的结果为每部漫画按章节保存 运行环境 IDE VS2019 Python3.7 先上代码,代码非常简短,包含空行也才50行,多亏了python强大的库 import os im ...
- 台式机主机u盘安装centos7报错及注意事项
利用UltraISO制作U盘启动安装台式机CentOS7系统:流程及报错解决 一.制作U盘 1.首先打开UltraISO软件,尽量下载最新版的 2.点击工具栏中的第二个打开镜像文件工具,如图红色方框标 ...