黑马程序员—jquery学习知识小结(1)

时间:2021-07-31 09:06:56

----------------------Windows Phone 7手机开发.Net培训、期待与您交流! ----------------------

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() 执行对元素的操作


文档就绪函数:
如果在文档没有完全加载之前就运行函数,操作可能失败:
jQuery 函数位于一个 document ready 函数中,防止文档在完全加载(就绪)之前运行 jQuery 代码。
$(document).ready(function(){
});


jQuery 元素选择器:

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.a") 选取所有 class="a" 的 <p> 元素。

$("p#b") 选取 id="b" 的<p> 元素。
 

jQuery 属性选择器:

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='x']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='x']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
 

jQuery CSS 选择器:

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

例如:

$("div").css("background-color","blue");(即把所有div背景设为蓝色)

jQuery 事件函数:
jQuery 事件处理方法是 jQuery 中的核心函数。
例如,$("button").click(function() {}),是指button单击触发的事件。
$(document).ready(function(){
  $("button").click(function(){
    $("#divhead").hide();
  });
});(为单击button后,id为divhead的div隐藏)

 $(selector).dblclick(function)
 触发或将函数绑定到被选元素的双击事件

 $(selector).focus(function)
 触发或将函数绑定到被选元素的获得焦点事件
 
 $(selector).mouseover(function)
 触发或将函数绑定到被选元素的鼠标悬停事件

jQuery 隐藏和显示:
通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示,

hide() 和 show() 都可以设置两个可选参数:speed 和 callback。

语法:
$(selector).hide(speed,callback)

$(selector).show(speed,callback)

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

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称
例如:
$("button").click(function(){
$("#divhead").show(1000);
});(单击button后,id为divhead的div在10秒内慢慢显现)

jQuery 切换:
jQuery toggle(),
语法:
$(selector).toggle(speed,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。

例如:
$("button").click(function(){
$("p").toggle();
});

---------------------- Windows Phone 7手机开发.Net培训、期待与您交流! ----------------------