JQuery入门

学习JQuery之前,先了解一下HTML、CSS、JavaScript。

JQuery是JavaScript的一个函数库

主要有:

1.HTML元素提取

2.HTML元素操作

3.CSS操作

4.JavaScript 特效和动画

5.HTML DOM 遍历和修改

6.AJAX

7.Utilities

一、如何在HTML中使用JQuery

在页面中head中加入script标签

<head>

<script type="text/javascript" src="jquery.js"></script>

</head>

<script type="text/javascript" src="jquery.js"></script>

二、JQuery最鲜明的特点

$是作为JQuery做明显的特征之一。它的基本用法:$(selector).action()

(1)selector有点类似DOM解析.

(2)action则为响应事件.

三、JQuery选择器

(1)使用CSS来提取HTML元素

提取html中所有"p"的标签: $("p")

提取html中某个类中的"p"的标签:$("p.class")

提取html中id为demo的第一个为"p"的标签:#("p#demo")

(2)使用XPath来提取给定属性的元素

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

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

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

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

四、响应事件

$("标签").click(function() {...some code... } )

(1)在HTML中的head中

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

...some code...

});

});

</script>

</head>

(2)在单独的JS中

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="my_jquery_functions.js"></script>

</head>

注意:JQuery名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

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

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

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

五、事件函数

常见事件:隐藏、显示、切换、滑动 以及动画

时间: 2024-10-10 05:43:52

JQuery入门的相关文章

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

jQuery 入门笔记1

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多). 1:jQuery使用 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#

jQuery入门(2)使用jQuery操作元素的属性与样式

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 一.区分DOM属性和元素属性 对于下面这样一个标签元素: <img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img> 我们通常将id.src.alt.class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

jquery入门之jquery简

Jquery是javascript中中众多框架中的一个框架.它是轻量级的js库,以DOM元素为核心一点一点地给他们添加新功能.Jquery的特色就是"面向集合和方法连缀",Jquery的设计秉承了一致性和对称性原则,它的大部分概念都是从html和css的结构中借用来的.它利用CSS选择符创建jquery对象,为这些对象提供丰富的方法,批量操作其中的DOM元素,而且让所有方法尽可能再返回这个对象以实现方法连缀调用,这些绝妙的创意组合在一起,让写javascript代码变得妙趣横生! Jq

jQuery 入门教程(二): 基本语法

学习jQuery之前需要你有下面几个方面的基本知识 HTML CSS JavaScript jQuery 的基本语法 $(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样. action() 定义操作该HTML元素的方法. 比如: $(this).hide() – 隐藏当前元素. $("p").hide() – 隐藏所以 <p> 元素. $(".te

jQuery入门(3)事件与事件对象

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 一.事件与事件对象 首先看一下我们经常使用的添加事件的方式: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery 入门教程(一): 概述

jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自Wikepedia上的jQuery说明: jQuery 是开源软件,使用MIT许可证授权.[4] jQuery的语法设计使得许多操作变得容易,如操作文档对象(document).选择DOM元素.创建动画效果.处理事件.以及开发Ajax程序.jQuery 也提供了给开发人员在其上创建插件的能力.这使开发人员可以对底层交互与动画.高级效果和高级主题化的组件进行抽象化.模块化的方式使 jQu

jQuery 入门教程(三): Selectors

jQuery Selector 是jQuery库中非常重要的一个组成部分. jQuery Selector 用来选择某个HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始. 选择HTML标记 选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有<p>元素 $("p") 下面的例子当用户点击一个按钮时,隐藏所有的<p>元素 $(document).ready(function()

jQuery入门(4)jQuery中的Ajax应用

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax应用 一.原始Ajax与jQuery中的Ajax 首先通过实例, 来看一下jQuery实现Ajax有多简单. 下面是一个使用原始Ajax的示例: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "