`
韩悠悠
  • 浏览: 842609 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jquery学习笔记1

    博客分类:
  • web
 
阅读更多

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

例子:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

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

--- jQuery functions go here ----

});
----------------------

jQuery 元素选择器

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

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

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

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

-------------------------

jQuery 属性选择器

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

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

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

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

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

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

下面的例子把所有 p 元素的背景颜色更改为红色:
$("p").css("background-color","red");

----------------------------------
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
例子
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

分享到:
评论

相关推荐

    Jquery学习笔记1

    ### Jquery 学习笔记1 本篇笔记主要围绕 jQuery 的基本使用方法展开,包括了 DOM 操作、选择器的使用、属性与过滤器等内容。jQuery 是一款优秀的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画等...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    jQuery学习笔记(一)

    **jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    锋利的JQuery学习笔记.pdf

    锋利的JQuery学习笔记

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    jQuery 语法学习笔记

    jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...

    jquery 学习笔记

    **jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...

    韩顺平jquery学习笔记及练习

    《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源,由知名讲师韩顺平的课程实录整理而成,旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    JQuery学习笔记

    以下是对JQuery学习笔记的详细解析: 首先,JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异,导致开发跨浏览器的网页应用变得复杂。为了统一这些...

    javascript and jquery学习笔记与资料

    这里,我们有针对这两个主题的学习笔记和参考资料,包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先,`JavaScript培训.zip`可能包含的是对...

    jquery学习笔记.rar

    《jQuery学习笔记详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的语法和强大的功能,深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery,无论你是初学者还是有...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    JQuery学习笔记合集

    **jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...

    JQuery学习笔记(日常积累)

    1. **元素引用**: jQuery通过`$()`函数来选取元素,支持多种方式,包括id、class、元素名以及层级关系和DOM或XPath条件。返回的结果是一个jQuery对象,也称为jQuery集合,即使只选取了一个元素,返回的也是一个...

    jQuery学习笔记 jQuery API

    **jQuery学习笔记 jQuery API** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...

    Jquery学习笔记分享

    **jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...

    JQuery学习笔记(技术文档)

    ### JQuery学习笔记(技术文档) #### 一、JQuery能做什么? JQuery 是一款轻量级的 JavaScript 库,它的设计宗旨是“write less, do more”,即“写得更少,做得更多”。通过JQuery,可以实现以下功能: 1. **...

    jQuery学习笔记

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记,以HTML页面的形式呈现,方便阅读和...

    圣思源的jquery学习笔记

    《圣思源jQuery学习笔记详解》 jQuery,作为一款强大的JavaScript库,自2006年发布以来,因其简洁易用的API和丰富的插件生态,迅速成为了前端开发者的重要工具。圣思源张龙老师的jQuery学习笔记,深入浅出地剖析了...

Global site tag (gtag.js) - Google Analytics