jquery 学习 总结
OM = Document Object Model(文档对象模型)
一.基础
1. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
可以减少加载时间,提高加载速度
2. 选择器
$(this) $("p:first") :even :odd
3. 事件
鼠标事件 键盘事件 表单事件 文档窗口事件
4. hide() 和 show() 方法来隐藏和显示 HTML 元素 toggle()切换 hide() 和 show() 方法
5. 淡入淡出效果 fadeIn() fadeOut() fadeToggle() fadeTo()
6. 滑动 slideDown() slideUp() slideToggle()
7. 动画 animate({left:'100px'},"slow") 方法用于创建自定义动画 使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -= $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });
stop() 方法用于停止动画或效果,在它们完成之前
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
8. $(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
}); //回调函数
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("现在段落被隐藏了");
});
}); //非回调函数
二.操作 HTML 元素和属性
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
attr() 方法用于获取属性值。 $("#runoob").attr("href")
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); ///回调函数 return
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
删除元素和内容
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
remove(".italic"); 对被删元素进行过滤
三.遍历 DOM 树
- parent()
- parents()
- parentsUntil()方法返回介于两个给定元素之间的所有祖先元素
- children() 方法返回被选元素的所有直接子元素。
- find()方法返回被选元素的后代元素,一路向下直到最后一个后代。
- siblings() 方法返回被选元素的所有同胞元素。
- next() 方法返回被选元素的下一个同胞元素。
- nextAll() 方法返回被选元素的所有跟随的同胞元素。
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元
- first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素
- filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。
提示:not() 方法与 filter() 相反。
四.Ajax
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
jquery 学习 总结的更多相关文章
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jquery学习(一)
简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- 很不错的jQuery学习资料和实例
这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...
- jquery学习以及下载链接
jquery学习链接 http://www.w3school.com.cn/jquery/jquery_intro.asp jquery 脚本库下载链接 http://jquery.com/downl ...
- 转载最佳JQuery学习网站
转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript ...
- JQuery学习笔记--01
JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...
随机推荐
- 如何让微信里的html应用弹出“点击右上角分享到朋友圈”的图片
一个分享按钮,一个隐藏的图片(这个图片绝对定位在右上角)然后就是点击显示,点击隐藏了... <a href="javascript:;" onclick="docu ...
- EF大数据批量处理 EntityFrameWork下增加扩展方法
为EF操作方法添加扩展方法 BulkInsert 大致设计方式为 通过当前DbContext 获取当前连接字符串,调用连接字符串获取当前实体的所有字段及字段属性,映射到DataTable中 在调用Sy ...
- Nginx 拒接服务漏洞(CVE-2016-0747)整改
Nginx的拒绝服务漏洞主要影响版本为1.10.3之前的版本,为不影响原有nginx的使用,且为避免修改其它配置文件,可以通过编译nginx最新版本的执行文件去替换旧的执行文件,文中的场景为由ngin ...
- 【Android】Android自定义属性,attr format取值类型
1. reference:参考某一资源ID. (1)属性定义: <declare-styleable name = "名称"> <attr name = &quo ...
- Kudu的集群安装(1.6.0-cdh5.14.0)
kudu的架构体系 下图显示了一个具有三个 master 和多个 tablet server 的 Kudu 集群,每个服务器都支持多个 tablet.它说明了如何使用 Raft 共识来允许 maste ...
- zip文件解压工具类
java解压zip文件 import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io. ...
- 三色抽卡游戏 博弈论nim
你的对手太坏了!在每年的年度三色抽卡游戏锦标赛上,你的对手总是能打败你,他的秘诀是什么? 在每局三色抽卡游戏中,有n个卡组,每个卡组里所有卡片的颜色都相同,且颜色只会是红(R).绿(G).蓝(B)中的 ...
- 如何用 Python 模糊搜索文件
一.我的文件在哪里? 1.告诉计算机文件在哪 使用路径描述位置 绝对路径——从根目录写到底 内置模块OS 路径 目录 文件 其他系统操作 2.描述文件的特征 用条件判断来筛选 3.对比后打印文件名 用 ...
- 框架MyBatis
ByBatis MyBatis是Apache的一个开源项目iBatis,iBatis3.x 正式更名为MyBatis ,代码于2013年11月迁移到Github.它是一个基于Java的持久层框架(连数 ...
- php(apache)切换版本
php(apache)切换版本 1.brew link php@7.1 2.上两行写入 ~/.bash_profile文件 3.source ~/.bash_profile 4.sudo vi /et ...