jQuery学习基础知识小结


Posted in Javascript onNovember 25, 2010

jQuery学习笔记:

jQuery学习
1、基本语法:
$(selector).action()
$:定义jQuery
selector:选择符,查询和查找HTML元素
action():对元素执行的操作
实例:
$(this).hide()------隐藏当前元素
$("p"),hide()-------隐藏所有的p元素
$("#ID").hide()-----隐藏id=ID的元素
$("p.Class")--------隐藏class=Class的P

$(document).ready(function(){-----});
这样用为了防止文档未加载就运行jQuery代码。
2、选择器通过属性选择元素
$("[href]") 选择所有具有href属性的元素
$("[href='AA']") 选择属性href=‘AA'的元素
$("[href!='AA']")选择所有href!=‘AA'的元素
$("[href$='.jpg']")选取所有href值以.jpg结尾的元素
3、选择器选择Css属性
$("p").css("background-color","red"); 修改所有的p元素的背景颜色为红色
$("div#ID .Class") id=ID的div元素中所有class=Class的元素
4、名称冲突
var jQMy = jQuery.noConflict() yong jQMy代替$
5、常用事件
$(document).ready(function) 文档的就绪事件
$(selector).click(function) 被选元素的点击事件
$(selector).dblclick(function) 被选元素的双击事件
$(selector).focus(function) 被选元素获得焦点事件
$(selector).mouseover(function) 被选元素鼠标悬停事件
6、jQuery效果
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画
参数:"slow", "fast", "normal" 或毫秒
回调函数:callback
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
7、jQuery的HTML操作
$(selector).html(content) 改变被选元素的(内部)HTML
$(selector).append(content) 向被选元素的(内部)HTML 追加内容
$(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
$(selector).after(content) 在被选元素之后添加 HTML
$(selector).before(content) 在被选元素之前添加 HTML
8、jQuery的CSS操作
$(selector).css(name,value) 为匹配元素设置样式属性的值
$(selector).css({properties}) 为匹配元素设置多个样式属性
$(selector).css(name) 获得第一个匹配元素的样式属性值
$(selector).height(value) 设置匹配元素的高度
$(selector).width(value) 设置匹配元素的宽度
9、jQuery AJAX 请求
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件
(selector) jQuery 元素选择器语法
(url) 被加载的数据的 URL(地址)
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时,所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项

Javascript 相关文章推荐
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 #Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 #Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 #Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 #Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 #Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 #Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 #Javascript
You might like
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
外语专业毕业生自我评价分享
2013/10/05 职场文书
企业节能减排实施方案
2014/03/19 职场文书
2015年教师新年寄语
2014/12/08 职场文书
廉政承诺书
2015/01/19 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript