Heim > Web-Frontend > js-Tutorial > jQuery学习基础知识小结_jquery

jQuery学习基础知识小结_jquery

WBOY
Freigeben: 2016-05-16 18:15:19
Original
917 Leute haben es durchsucht

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 请求的所有键/值对选项

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage