W3Cschool的jQuery学习笔记

• jQuery语法
  • 选择器selector
    • 元素选择器
    • id选择器
    • class选择器
    • 方法
  • 事件event
    • 语法
    • 例子
    • 事件连接chaining
    • 设置值

jQuery语法

 

$(selector).action()

$表示这是jQuery脚本

selector为选择器

action()为jQuery对选择的元素的操作

jQuery脚本类似 $(document).ready(function(){......});

这是为了防止出现“试图操作某个还没加载的元素”等错误，而声明的。这样jQuery语句只会在页面加载完成以后执行。

$(function(){..........});这么写也是可以的。

选择器selector

元素选择器

1. 如$("p")，选择所有<p>元素
2. 如$(this)，选择当前元素
3. 如$( * )，选择所有元素

id选择器

1. 如$("#id")，选择id="id"的元素

class选择器

1. 如$(".class")，选择class="class"的元素

方法

• 可以复合使用，例如$("p".class)代表选择class="class"的<p>元素
• 还有若干选择方法，比如$("ul:first")代表选择<ul>的第一个<li>元素等

事件event

语法

• $(selector).event(function(){.......});
• 上述语句表示，对于选择器选中的元素，一旦触发事件，则执行方法。

例子

• 鼠标事件：click,dblclick,mousedown,mouseup,mouseover...
• 键盘事件：keypress,keydown,keyup...
• 表单事件：submit,focus,blur...
• 窗口事件：load,resize,scroll...

事件连接chaining

• 例如$("p").event1().event2().event3();
• 可以先后调用事件1，事件2，事件3 。
• 写成带有缩进空格的形式也不影响jQuery理解这段代码

设置值

1. text(val) 用val替换元素文本
2. html(val) 用val替换元素文本，val可以包含html标签
3. val(val) 用val替换表单元素文本

 

• jQuery语法
  • 选择器selector
    • 元素选择器
    • id选择器
    • class选择器
    • 方法
  • 事件event
    • 语法
    • 例子
    • 事件连接chaining
    • 设置值

jQuery语法

 

$(selector).action()

$表示这是jQuery脚本

selector为选择器

action()为jQuery对选择的元素的操作

jQuery脚本类似 $(document).ready(function(){......});

这是为了防止出现“试图操作某个还没加载的元素”等错误，而声明的。这样jQuery语句只会在页面加载完成以后执行。

$(function(){..........});这么写也是可以的。

选择器selector

元素选择器

1. 如$("p")，选择所有<p>元素
2. 如$(this)，选择当前元素
3. 如$( * )，选择所有元素

id选择器

1. 如$("#id")，选择id="id"的元素

class选择器

1. 如$(".class")，选择class="class"的元素

方法

• 可以复合使用，例如$("p".class)代表选择class="class"的<p>元素
• 还有若干选择方法，比如$("ul:first")代表选择<ul>的第一个<li>元素等

事件event

语法

• $(selector).event(function(){.......});
• 上述语句表示，对于选择器选中的元素，一旦触发事件，则执行方法。

例子

• 鼠标事件：click,dblclick,mousedown,mouseup,mouseover...
• 键盘事件：keypress,keydown,keyup...
• 表单事件：submit,focus,blur...
• 窗口事件：load,resize,scroll...

事件连接chaining

• 例如$("p").event1().event2().event3();
• 可以先后调用事件1，事件2，事件3 。
• 写成带有缩进空格的形式也不影响jQuery理解这段代码

设置值

1. text(val) 用val替换元素文本
2. html(val) 用val替换元素文本，val可以包含html标签
3. val(val) 用val替换表单元素文本