Jquery入门

jQuery入门教程(很不错)

jQuery入门[1]－构造函数/archive/2008/03/05/1091816.html jQuery优点◦体积小（v1.2.3 15kb）◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器（IE6,FF,Safari,Opera）◦链式代码◦强大的事件、样式支持◦强大的AJAX功能◦易于扩展，插件丰富jQuery的构造函数接收四种类型的参数：jQuery(expression,context)jQuery(html)jQuery(elements)jQuery(fn)第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。

DEMO:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>jQuery basic title><style type="text/css">.selected{background-color:Yellow;}style><script src="../scripts/jquery-1.2.3.intellisense.js"type="text/javascript">script>head><body><h3>jQuery构造函数h3><ul><li>jQuery(expression,context)li><li>jQuery(html)li><li>jQuery(elements)li><li>jQuery(fn)li>ul><script type="text/javascript">script>body>html>将以下jQuery代码加入文末的脚本块中：jQuery("ul>li:first").addClass("selected");页面运行效果如下：其中jQuery()可替换为快捷方式$()，如果$被其它对象占用，可使用jQuery.noConflict()函数取消快捷方式。

jQuery基础入门ppt

jQuery的选择器
jQuery 选择器
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法
完善的事件处理机制
基本选择器
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素
删除节点
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用. empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
创建节点和插入节点示例 var newP =$("<p>武广高速铁路即将通车！ </p>"); newP.insertAfter(―#chapter‖); //将创建的newP元素插入到ID为#chapter的元素之后或者 newP.appendTo(―body‖); //插入到body元素里
内容过滤选择器示例
改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa $("p:cotains(di)") 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa 改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaa $("p:has(.mini)") 改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa

Jquery基础知识之菜鸟教程

Jquery基础知识之菜鸟教程 jquery核⼼： write less do more1.jQuery 语法基础语法： $(selector).action();2.⽂档就绪事件：⽂档完全加载完后执⾏函数第⼀种⽅式： $(document).ready(function(){});第⼆种⽅式： $(function(){});3.jQuery 选择器元素选择器 $("p").hide(); // 所有的p元素隐藏#id选择器 $("#test").hide();//id为test的元素隐藏.class选择器 $('.test').hide(); // class为test的所有元素隐藏$("*") //选取所有元素$(this) // 选取当前HTML元素$("p .intro") // 选取class 为intro的p元素$("ul li:first") //选取第⼀个ul元素下的第⼀个li元素$('ul li:first-child') //选取每个ul下的第⼀个li元素$('[href]') //选取所有带href属性的元素$('a[target="_blank"]') //选取所有a元素(带有target属性值为_blank)$('a[target !="_blank"]') //选取所有a元素(不带有target属性值为_blank)$(":button") // 选取所有type=“button”的input和button元素$("tr：even") // 选取所有的偶数⾏$("tr:odd") //选取所有的奇数⾏4.jQuery 事件事件：页⾯对不同访问者的响应⿏标事件： click dbclick mouseenter mouseleave hover(悬停事件)键盘事件： keypress keydown keyup blur表单事件： submit change focus unload⽂档窗⼝事件：load resize scroll4.1 jQuery 事件⽅法语法$("p").click(function(){//点击p元素后执⾏的代码});$("p").dblclick(function(){ //双击事件$(this).hide();});$("#p1").mouseenter(function(){ // ⿏标指针穿过元素事件alert("You entered p1!");});$("#p1").mouseleave(function(){// ⿏标指针离开元素事件alert("Bye! You now leave p1!");});$("input").focus(function(){// 元素获得焦点事件$(this).css("background-color","#cccccc");});$("input").blur(function(){// 元素失去焦点事件$(this).css("background-color","#ffffff");});5.jQuery 效果5.1 隐藏和现实HTML元素：$(selector).hide(speed,callback);$(selector).show(speed,callback);例：$("button").click(function(){$("p").hide(1000);//1000毫秒，隐藏的速度，1s钟隐藏});5.2 来回切换隐藏和显⽰⽤ toggle();<button>隐藏/显⽰</button>$("button").click(function(){$("p").toggle();});6. 淡⼊淡出$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);$(selector).fadeTo(speed,opacity,callback);$("button").click(function(){ //三个div逐次出现$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});$("button").click(function(){ //三个div逐次淡出，依次看不见$("#div1").fadeOut();});<button>点击淡⼊/淡出</button>$("button").click(function(){$("#div3").fadeToggle(3000);});$("button").click(function(){$("#div1").fadeTo("slow",0);//0完全透明，div1看不见了});7. 滑动⽅法$(selector).slideDown(speed,callback); //向下收起来$(selector).slideUp(speed,callback); //向上收起来$(selector).slideToggle(speed,callback);8.动画：默认情况下，所有 HTML 元素都有⼀个静态位置，且⽆法移动。

jquery基础

jQuery基础教程一(传说中的ready)首先我们来说明一下什么是JqueryjQuery 是一个新型的JavaScript库.jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。

jQuery的设计会改变你写JavaScript代码的方式。

jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。

jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。

jQuery支持CSS1-CSS3,以及基本的xPathjQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 第一步 ready函数如果你需要一些函数需要在DOM加载就绪以后才能执行,当然window.onload()能实现同样的功能，但当window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。

要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的.$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。

通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.(document)意思是说，获取整个网页文档对象（类似的于window.document），$(document).ready意思就是说，获取文档对象就绪的时候。

$(document).ready(function() {// do stuff when DOM is ready//当文档载入后从此处开始执行代码});jquery基础教程二(鼠标点击事件)下面我们来看看jquery如何给 DOM 各个元素批量绑定事件<SCRIPT LANGUAGE="JavaScript"></SCRIPT>$("div").click $("div")就是页面中所有的 div标签这句话就是给所有的标签为div的元素绑定了一个click事件即当所有div 被鼠标单击的时候执行 alert("Hello World!");<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery基础教程二（demo鼠标点击事件）</title><script language="javascript"src="/demo/jquery.js"></script><SCRIPT LANGUAGE="JavaScript"></SCRIPT></head><body><div>Hello World!</div></body></html>程序演示地址 : /demo/jquery基础教程二demo鼠标点击事件.htmljquery基础教程三(css的操作之addClass和removeClass)下面我们看看jquery对css的操作方法 addClass和removeClassaddClass为每个匹配的元素添加指定的类名。

基础jquery知识点

基础jquery知识点基础jQuery知识点jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果等操作。

在网页开发中，jQuery非常常用，是前端开发的基础知识之一。

下面将介绍一些基础的jQuery 知识点。

一、选择器（Selectors）选择器是使用jQuery的关键，它允许我们通过各种方式选择HTML元素，并对其进行操作。

常见的选择器包括元素选择器、类选择器、ID选择器等。

1. 元素选择器元素选择器使用元素的标签名作为选择器，可以选择所有匹配的元素。

例如，使用$("p")可以选择页面中的所有段落元素。

2. 类选择器类选择器使用元素的class属性作为选择器，可以选择具有相同类名的所有元素。

例如，使用$(".class")可以选择页面中所有具有class为class的元素。

3. ID选择器ID选择器使用元素的id属性作为选择器，可以选择具有相同id的元素。

例如，使用$("#id")可以选择具有id为id的元素。

二、事件处理（Event Handling）事件处理是jQuery的另一个重要功能，它允许我们对HTML元素进行事件绑定，并在事件发生时执行相应的操作。

1. click事件click事件在元素被点击时触发，我们可以使用click()函数来绑定click事件，并定义事件处理函数。

例如，使用$("button").click(function(){})可以在点击按钮时执行相应的操作。

2. hover事件hover事件在鼠标悬停在元素上时触发，我们可以使用hover()函数来绑定hover事件，并定义事件处理函数。

例如，使用$("div").hover(function(){}, function(){})可以在鼠标悬停在div元素上时执行第一个函数，鼠标移出时执行第二个函数。

jquery前端基础知识

Jquery前端培训材料1. Jquery介绍1.1简介Jquery是一款革命性的JavaScript库，秉承着“以用为本”的设计理念。

倡导“写更少的代码，做更多的事”（write less,do more），极大的提升了JavaScript开发体验。

jquery的核心特性可以总结为:口兼容主流浏览器.支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+等，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

口具有独特的链式语法和短小清晰的多功能接口。

口具有高效灵活的CSS选择器。

并且可对CSS选择器进行扩展口拥有便捷的插件扩展机制和丰富的插件1.2总体架构Jquery的模块可以分为3部分:入口模块、底层支持模块和功能模块，如图所示，在构造Jquery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jquery对象。

选择器Sizzle是一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合。

工具方法模块提供了一些编程辅助方法，用于简化对jquery对象. DOM元素数组对象字符串等的操作。

Jquery代码整体结构代码如下:(function (window, undefined) {//构建jQuery对象var document = window.document,navigator = window.navigator,location = window.location;var jQuery = (function () {var jQuery = function (selector, context) {return new jQuery.fn.init(selector, context, rootjQuery);},_jQuery = window.jQuery;//............................//............................return jQuery; //981行})();//工具方法:Utilities;//回调函数列表Callbacks//异步队列Deferred//浏览器功能测试Support//数据缓存Cache//属性操作Attributes//队列Queue//事件系统Event//选择器Sizzle//Dom遍历Traversing//Dom操作Manipulation//样式操作CSS//异步请求Ajax//动画Effects//坐标Offset. 尺寸Dimensionswindow.jQuery = window.$ = jQuery;})(window);2. 核心模块2.1 jquery对象从上面的代码中可以看出，jquery的所有代码都被包裹在一个立即执行的匿名表达式中，这种代码结构称为“自调用匿名函数”。

JQuery基础

JQuery基础1、JQuery概念A、Jquery是一个优秀的Javascript框架。

它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

B、JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。

为了简化操作，出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。

C、JQuery的优点:小巧、方便、功能强大。

插件丰富、开源、免费。

D、VS在VS2010中已经实现自动完成功能，VS2008需要安装VSSP1补丁和VS90SP1-KB958502-X86补丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js 放在同目录下，VS2008中才会有自动提示和自动完成功能。

E、JQuery文件说明:jquery-1.4.2.js是JQuery主文件。

jquery-1.4.2.min.js是压缩板JQuery主文件。

jquery-1.4.2-vsdoc.js是JQuery在VS中的自动提示功能。

2、JQuery之ReadyA、JQuery的read和Dom onload的区别:onload是所有Dom元素创建完毕触发，而ready 则是Dom元素创建完就触发，这样可以提高网页的响应速度。

3、JQuery内置函数A、$.map(array, function)函数:对数组array中每个元素调用function函数逐个处理，function 函数处理返回一个新的数组。

效果：看一个JQ写的tab切换的代码
jQuery选择器
jQuery选择器的优势 ➢ 简洁的写法 ➢ 支持CSS1到CSS3选择器 ➢ 完善的处理机制 jQuery选择器的分类 ➢ 基本选择器 ➢ 层次选择器 ➢ 过滤选择器
基本选择器
选择器 #id .class element
描述
返回
示例
根据给定的id匹配一个元素单个元素 $(“#test”)选取id为test的元素
选取不包含子元素或者文本的空元素
$(‘div:empty’)选取集合元素不包含子元素和文本的
空元素<div>
选取含有选择器所匹配的元素的元素
$(‘div:has(p)’)选取集合元素含有<p>元素的<div>
元素
选取含有子元素或者文本的元素(非空元素)
$(“div:parent”)选取集合元素拥有子元素或文本元素
集合元素
$(“div,span,p.myClass”)选取所有<div>，<span>和拥有class 为myClass的<p>标签的一组元素
层次选择器
两个标签名之间用空格分隔
选择器
描述
返回值
示例
$(“ancestor desendant”)
选取ancestor元素里的所有 descendant(后代)元素
如今，jQuery已经成为最流行的javascript库。
配置jQuery环境
获取jQuery类库进入jQuery官网，下载jQuery文件。 2.0及之后的版本，不兼容IE6 7 8
在页面中引入jQuery 和其他JS文件引入一样：