jQuery 学习笔记

目录

一.jQuery 是一个 JavaScript 库,

    极大地简化了 JavaScript 编程,

    并且很容易学习。

二.jQuery的功能概括:

三.jQuery语法:

1.jQuery入口函数:

2.JavaScript 入口函数:

3.jQuery 入口函数与 JavaScript 入口函数的区别:

四.jQuery 选择器

五.jQuery 事件

六.jQuery 隐藏/显示

七.jQuery 淡入淡出

八.jQuery 滑动

九.jQuery 动画

十.jQuery 停止动画

十一.jQuery HTML 获取 和 属性


一.jQuery 是一个 JavaScript 库,

    极大地简化了 JavaScript 编程,

    并且很容易学习

二.jQuery的功能概括:

        1.html的元素选取

        2.html的元素操作

        3.html dom遍历和修改

        4.js特效和动画效果

        5.css操作

        6.html事件操作

三.jQuery语法:

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

        1.美元符号“ $ ”定义jQuery

        2.选择符(selector)“查询”和“查找”HTML元素

        3.jQuery的action() 执行对元素的操作

1.jQuery入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

2.JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

3.jQuery 入口函数与 JavaScript 入口函数的区别:

  •  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
  •  JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

四.jQuery 选择器

$(this).hide()

演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素。

$("p").hide()

演示 jQuery 的 hide() 函数,隐藏所有

元素。

$(".test").hide()

演示 jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。

$("#test").hide()

演示 jQuery 的 hide() 函数,隐藏 id="test" 的元素。

五.jQuery 事件

jQuery click()
演示 jQuery jQuery click() 事件.

jQuery dblclick()
演示 jQuery dblclick() 事件。

jQuery mouseenter()
演示 jQuery mouseenter() 事件。

jQuery mouseleave()
演示 jQuery mouseleave() 事件。

jQuery mousedown()
演示 jQuery mousedown() 事件。

jQuery mouseup()
演示 jQuery mouseup() 事件。

jQuery hover()
演示 jQuery hover() 事件。

jQuery focus() 和 blur()
演示 jQuery focus() 和 blur() 事件

六.jQuery 隐藏/显示

jQuery hide()
演示 jQuery hide() 方法。

jQuery hide() 和 show()
演示jQuery hide() 和 show() 方法。

jQuery toggle()
jQuery toggle() 用于切换 hide() 和 show() 方法。

jQuery hide()
另外一个隐藏文本的实例。

七.jQuery 淡入淡出

jQuery fadeIn()
演示 jQuery fadeIn() 方法。

jQuery fadeOut()
演示 jQuery fadeOut() 方法。

jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。

jQuery fadeTo()
演示 jQuery fadeTo() 方法。

八.jQuery 滑动

jQuery slideDown()
演示 jQuery slideDown() 方法。

jQuery slideUp()
演示 jQuery slideUp() 方法。

jQuery slideToggle()
演示 jQuery slideToggle() 方法。

九.jQuery 动画

jQuery animate()
演示简单的 jQuery animate() 方法。

jQuery animate() - 设置多个css属性
演示通过 jQuery animate() 方法 改变样式。

jQuery animate() - 使用相关值
演示如何在 jQuery animate() 方法中使用相关值。

jQuery animate() - 使用预定义值
演示通过 animate() 方法预定义 "hide", "show", "toggle" 值。

jQuery animate()
演示更多 jQuery animate() 方法实例

jQuery animate()
演示更多 jQuery animate() 方法实例 (多个 animate() 回调).

十.jQuery 停止动画

jQuery stop() 滑动
演示 jQuery stop() 方法。

jQuery stop() 动画 (带参数)
演示 jQuery stop() 方法。

十一.jQuery HTML 获取 和 属性

jQuery text() 和 html() - 获取文本和内容
使用jQuery text() 和 html() 方法获取内容。

jQuery val() - 获取值
使用jQuery val() 方法获取表单的字段值。

jQuery dblclick()
使用jQuery attr() 方法获取属性值。

你可能感兴趣的:(HTML,新手,JS,jquery,学习,javascript)