jQuery技术

分享Jquery学习笔记

字号+ 作者:H5之家 来源:H5之家 2016-03-27 14:00 我要评论( )

开始吧... 文档就绪函数 : $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。 ========================================== jQuery 语法实例 $(this).hide() 演示 jQuery hid

开始吧...

文档就绪函数:
$(document).ready(function(){

   --- jQuery functions go here ----

});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

 

==========================================
jQuery 语法实例
$(this).hide() 
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 
$("#test").hide() 
演示 jQuery hide() 函数,隐藏 id="test" 的元素。 
$("p").hide() 
演示 jQuery hide() 函数,隐藏所有 <p> 元素。 
$(".test").hide() 
演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。

 

=============================================
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

美元符号定义 jQuery 
选择符(selector)“查询”和“查找” HTML 元素 
jQuery 的 action() 执行对元素的操作 
示例
$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p.test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

======================================
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:

实例
$("p").css("background-color","red");
当按钮的点击事件被触发时会调用一个函数
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素:

$("p").hide();

=============================
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
.hide()与.slideToggle("slow");的作用
hide是一下子没掉(也可在参数设置隐藏时间,但是是单向的)。slideToggle("slow")是慢慢没掉的,但是可以双向层的隐藏和显示

===============================
通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$(selector).hide(speed,callback)

$(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 怎样学习jQuery,jQuery教程

    怎样学习jQuery,jQuery教程

    2016-03-27 15:00

  • 深入学习jQuery Validate表单验证(二)

    深入学习jQuery Validate表单验证(二)

    2016-03-25 10:14

  • JQuery 学习笔记 选择器之一

    JQuery 学习笔记 选择器之一

    2016-03-23 17:00

  • jQuery取消$.POST的异步提交的方法

    jQuery取消$.POST的异步提交的方法

    2016-03-23 16:02

网友点评
.