id选择器 ：
$('#username') 相当于 document.getElementByIdx_x("username");
$('.username') 这个就像css里面的class = username
$('p') 获得p标签
$('p>input') 获得子标签，也就是获得p标签下面的input标签
$('p,div,span')同时获得多个标签
$(':input')获得表单标签
$('input[name='username']')获得name等于username的input标签
$("td:odd")表格的隔行
jQuery的加载事件
$(document).ready(function(){
});
隐藏效果
以前我们写隐藏效果主要是通过document.getElementByIdx_x("pp").style.display="none"
现在我们通过jquery来达到同样的效果
$(document).ready(function(){
$("button").click(function(){
$("#pp").hide();
});
});
同样可得出隐藏有几种写法：
第一种可以通过指定id来进行隐藏:
$("#id1").hide();
第二种可以通过class来进行隐藏
$(".class1").hide();
第三种可以通过标签来进行隐藏
$("p").hide();
第四种可以通过this来表示当前的使用对象
$(this).hide();
当然也可以隐藏子元素比如
$("ul.classli").hide();
隐藏所有class = classli的ul标签的内容，当然id的子元素也可以
$("ul#id1").hide()也可以
当然有隐藏那肯定有显示了
$("ul #id1").show()
属性选择器：
比如要想找
$("[src]") 选取所有带有src属性的元素
$("[src='a.jpg']") 选取所有带有src属性的并且src=a.jpg的元素
$("[src$='a']")选取以a结尾的src元素
jquery的css选择器
$("p").css("background-color","red");
第一个元素可以这样表示
$("ul li:first")表示ul元素下面的第一个li元素
jquery事件：
单击事件：
$("#id").click(function(){
})
获得焦点事件：
$("#id").focus(function(){
})
鼠标移过事件
$("#id").mouseover(function(){
})
jquery给我们封装好一个显示和隐藏切换的方法
toggle()方法，这样的话我们就可以切换直接切换了，比如
$("#iddd").click(function(){
$("p").toggle();
})
这样的话就可以得到一种隐藏跟显示的效果了！
jquery封装了向上滚动和向下滚动的效果，只要调用相应的方法即可！
$("#shidup").click(function(){
$("#up").slideUp();
})
$("#shiddown").click(function(){
$("#down").slideDown();
})
$("#slidetoggle").click(function(){
$("#toggle").slideToggle();
})
还有一种特效就是渐渐的变透明和消失，jquery里面也有封装好的方法
$("div").click(function(){
$(this).fadeOut("show",32);
})
还有fadeIn();
jquery里面还有一个还好的函数就是自定义动画函数animate();
$("#button").click(function(){
$("#box").annimate(
Unknown macro: {left}
,"slow");
$("#box").annimate(
Unknown macro: {right}
,"slow");
})
jquery里面的回调函数
比如你想让标签span隐藏2000毫秒以后回调一个函数就这么写
$("span").hide(1000,function(){
alert("已经隐藏了");
})
改变html内容：
$("p").html="okkk"
$("p").append="this is add"//追加内容
$("p").before //在匹配的元素前面添加
$("p").after //在匹配的元素后面添加
添加css样式：
$("p").css("background-color","red")
$("p").css(
Unknown macro: {"background-color"}
)
$("p").height()
$("p").width()
jquery给ajax提供了很多便利的方法可以直接调用
$.get(url,data,callback,type)
$.post(url,data.callback,type)
$.load(url,data,callback)
$.getJSon(url,data,callback)
在jquery里面
$("ul li:first")第一行
$("ul li:lat")最后一行
$("tr:odd")偶数行
$("tr:odd")奇数行
所有type="button"的元素
$(":button")
同理所有type="radion"的元素
$(":radio")
id选择器：
$('#username') 相当于 document.getElementByIdx_x("username");
$('.username') 这个就像css里面的class = username
$('p') 获得p标签
$('p>input') 获得子标签，也就是获得p标签下面的input标签
$('p,div,span')同时获得多个标签
$(':input')获得表单标签
$('input[name='username']')获得name等于username的input标签
$("td:odd")表格的隔行
jQuery的加载事件
$(document).ready(function(){
});
隐藏效果
以前我们写隐藏效果主要是通过document.getElementByIdx_x("pp").style.display="none"
现在我们通过jquery来达到同样的效果
$(document).ready(function(){
$("button").click(function(){
$("#pp").hide();
});
});
同样可得出隐藏有几种写法：
第一种可以通过指定id来进行隐藏:
$("#id1").hide();
第二种可以通过class来进行隐藏
$(".class1").hide();
第三种可以通过标签来进行隐藏
$("p").hide();
第四种可以通过this来表示当前的使用对象
$(this).hide();
当然也可以隐藏子元素比如
$("ul.classli").hide();
隐藏所有class = classli的ul标签的内容，当然id的子元素也可以
$("ul#id1").hide()也可以
当然有隐藏那肯定有显示了
$("ul #id1").show()
属性选择器：
比如要想找
$("[src]") 选取所有带有src属性的元素
$("[src='a.jpg']") 选取所有带有src属性的并且src=a.jpg的元素
$("[src$='a']")选取以a结尾的src元素
jquery的css选择器
$("p").css("background-color","red");
第一个元素可以这样表示
$("ul li:first")表示ul元素下面的第一个li元素
jquery事件：
单击事件：
$("#id").click(function(){
})
获得焦点事件：
$("#id").focus(function(){
})
鼠标移过事件
$("#id").mouseover(function(){
})
jquery给我们封装好一个显示和隐藏切换的方法
toggle()方法，这样的话我们就可以切换直接切换了，比如
$("#iddd").click(function(){
$("p").toggle();
})
这样的话就可以得到一种隐藏跟显示的效果了！
jquery封装了向上滚动和向下滚动的效果，只要调用相应的方法即可！
$("#shidup").click(function(){
$("#up").slideUp();
})
$("#shiddown").click(function(){
$("#down").slideDown();
})
$("#slidetoggle").click(function(){
$("#toggle").slideToggle();
})
还有一种特效就是渐渐的变透明和消失，jquery里面也有封装好的方法
$("div").click(function(){
$(this).fadeOut("show",32);
})
还有fadeIn();
jquery里面还有一个还好的函数就是自定义动画函数animate();
$("#button").click(function(){
$("#box").annimate(
Unknown macro: {left}
,"slow");
$("#box").annimate(
Unknown macro: {right}
,"slow");
})
jquery里面的回调函数
比如你想让标签span隐藏2000毫秒以后回调一个函数就这么写
$("span").hide(1000,function(){
alert("已经隐藏了");
})
改变html内容：
$("p").html="okkk"
$("p").append="this is add"//追加内容
$("p").before //在匹配的元素前面添加
$("p").after //在匹配的元素后面添加
添加css样式：
$("p").css("background-color","red")
$("p").css(
Unknown macro: {"background-color"}
)
$("p").height()
$("p").width()
jquery给ajax提供了很多便利的方法可以直接调用
$.get(url,data,callback,type)
$.post(url,data.callback,type)
$.load(url,data,callback)
$.getJSon(url,data,callback)
在jquery里面
$("ul li:first")第一行
$("ul li:lat")最后一行
$("tr:odd")偶数行
$("tr:odd")奇数行
所有type="button"的元素
$(":button")
同理所有type="radion"的元素
$(":radio")
原文出处：无言冬季的博客
http://blog.sina.com.cn/wuyandongji
分享到：
相关推荐
通过以上讲解，我们了解了jQuery的基本使用，包括选择器、DOM操作、事件处理、动画和Ajax交互。实践这些例子有助于更好地理解和掌握jQuery。对于初学者来说，理解并运用这些基础知识是迈进JavaScript和前端开发的...
### 一、jQuery 基本使用 jQuery 的核心在于它的选择器，它允许我们方便地选取HTML元素。例如，`$("#id")` 选择ID为指定值的元素，`$(".class")` 选择所有具有特定类名的元素，而`$("tagname")` 则选择所有指定标签...
在“jQuery基本功能”中，我们将深入探讨以下几个关键领域： 1. **选择器**: jQuery 的选择器类似于CSS，可以轻松选取DOM元素。例如，`$("#id")` 选择ID为指定值的元素，`$(".class")` 选择所有具有特定类名的元素...
#### 二、jQuery基本使用 ##### 2-1 引入jQuery - **方法**：通过在HTML文档中使用`<script>`标签来引入jQuery库。 ```html <script src="../js/jquery-1.11.0.js" type="text/javascript"> ``` - **感觉**：...
1. **jQuery基本使用**：了解如何选择元素（如`$("#id")`）、添加事件监听器（`.on()`)、修改CSS属性（`.css()`)以及执行动画效果（`.animate()`）。 2. **HTML结构**：进度条通常包含一个容器元素（如`<div>`）来...
jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇
### 三、基本使用 创建分页组件的基本步骤如下： 1. **选择器初始化**：选择一个元素作为分页容器，通过 jQuery 的 `pagination` 方法初始化分页组件。例如： ```javascript $('#paginationContainer')....
jQuery常用API,jQuery事件,就是jQuery的基本使用的基础文档,用来学习和记忆使用,
#### 三、JQuery基本使用方法 1. **文档就绪事件**：`$(document).ready()`函数是JQuery中最常用的方法之一，用于确保页面DOM完全加载完毕后执行代码。此方法可以简写为： ```javascript $(function(){ // ...
通过这些手册，开发者不仅可以学习到基本的jQuery使用，还可以深入了解jQuery的设计理念和高级技巧，提升网页开发效率和用户体验。同时，随着jQuery的不断更新，开发者也需关注最新版本的变化，以便更好地利用其新...
要使用jQuery Desktop，你需要具备基本的HTML、CSS和JavaScript知识，尤其是jQuery的使用经验。从nathansmith-jQuery-Desktop-f1addcc这个项目中，你可以获取源代码进行学习和二次开发。通过阅读代码和官方文档，...
jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 ...掌握以上内容，你就能开始使用jQuery进行基本的网页交互和动态效果的实现了。随着进一步的学习，你将能够利用jQuery的强大功能来创建复杂的网页应用。
编写基于Jquery的表单验证插件 ...1、初步运用了Jquery框架进行编程，基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件，并熟知实现原理。 3、基本实现了一个基于Jquery的表单验证的调查问卷。
jquery多脑图总结大全
**jQuery基本语法详解** jQuery是一个高效、简洁的JavaScript库，它极大地简化了DOM操作、事件处理、动画设计和Ajax交互。本篇将详细介绍jQuery的核心API和基本语法。 ### jQuery核心函数 1. **jQuery(expression...
基本使用 要使用 AutoComplete，你需要在输入框上添加 `autocomplete` 属性，并指定一个方法名，该方法将处理用户输入并返回建议列表。例如： ```html ``` 然后，在 JavaScript 部分编写初始化代码： ```...
《jQuery使用的JS文件详解》 在网页开发中，jQuery是一个不可或缺的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨jQuery的使用，以及如何引用和理解其中的JS...
jQuery的基本使用、选择器、效果、样式操作、属性操作、元素操作、尺寸操作、位置操作、以及事件注册、事件处理、事件对象、拷贝对象、多库共存、部分插件的使用
标题中的“不使用flash播放器,使用jquery播放flv视频.zip”表明了这个压缩包包含的资源是关于在网页中使用jQuery技术而非Flash播放FLV视频的方法。Flash曾是流媒体视频的标准，但随着HTML5的普及，Flash逐渐被淘汰，...