1. 选择器
$(“h2 a”) //选择<h2><a></a></h2>中间包含的<a>
2. 功能函数的前缀
$.trim(“ sdsfsdf ”) //调用trim方法去掉字符串前后空格
3. Ready()方法可以解决window.onload()方法的冲突
$(document).ready(function(){
//这里写的内容，就是onload()事件调用的方法
})
还可以简写成
$(function(){
//这里写的内容，就是onload()事件调用的方法
})
像这样的方法可以同时写多个，而没有冲突，jQuery帮我们解决了。
4. 创建DOM元素
$(function(){
Var oNewP = $(“<p>这是一个动人的故事</p>”); //创建一个DOM元素
oNewP.insertAfter(“#myTarget”); //调用insertAfter()方法插入元素，将插入在id为”myTarget”的元素的下方
})
5. 属性选择器
$(function(){
$(“ul li ul li:has(a)”).addClass(“myClass”);
//这个方法的作用就是把ul元素中的li元素中的ui元素中的li元素找出来，然后判断li元素中是否包含<a>，如果有就添加class为”myClass”
})
6. 位置选择器
$(function(){
$(“p:lt(2)”).addClass(“myClass”);
//将索引为2之前的<p>元素的class设为”myClass”,也就是说将页面中前2个<p>元素的class改为”myClass”,不包括索引为2的<p>元素，索引从0开始
})
7. 获取属性的值
$(function(){
Var title = $(“em:eq(1)”).attr(“title”); //查找页面中第二个<em>元素，再获取它的”title”属性的值
$(“span”).text(title); //将上面获得的属性值，赋给<span>元素
})
8. 设置属性的值
$(“button:gt(0)”).attr(“disabled”,”disabled”); //将页面中第0个<button>之后的所有<button>的disabled属性设为”disabled”
9. 添加CSS类
$(“div”).addClass(“myClass1 myClass2”); //为<div>元素添加”myClass1”和”myClass2”样式，可以为元素同时添加多个class样式
10. 动态切换样式
$(“p”).click(function(){ //找到<p>标记，点击事件
$(this).toggleClass(“highlight”); //$(this)就代表<p>,点击<p>时，如果<p>有”highlight”样式，就去掉，如果没有，就添加
});
11. 直接获取、编辑内容
$(function(){
Var string = $(“p:first”).text(); //获取页面中第一个<p>元素的纯文本
$(“p:last”).html(string); //设置最后一个<p>元互的innerHTML为string
});
12. 克隆元素
$(function(){
$(“img:eq(0)”).clone().appendTo($(“p”)); //将第一个<img>进行克隆，然后添加到所有<p>元素的后面
$(“img:eq(1)”).clone().appendTo($(“p:eq(0)”)); //将第二个<img>进行克隆，然后添加到第一个<p>元素的后面
});
13. 事件监听
$(function(){
$(“img”).bind(“click”,function(){ //将<img>挷定一个事件
$(“#show”).append(“<div>点击事件1</div>”);
}).bind(“click”,fuction(){ //再将<img>挷定一个事件
$(“#show”).append(“<div>点击事件2</div>”);
}).bind(“click”,function(){ //再将<img>挷定一个事件
$(“#show”).append(“<div>点击事件3</div>”);
}); //等于同时将<img>挷定了3个事件
});
14. 移除事件监听
$(function(){
Var fnFunction1; //函数变量
$(“img”).bind(“click”, fnFunction1 = function(){ //将<img>挷定一个事件
$(“#show”).append(“<div>点击事件1</div>”);
}).bind(“click”,fuction(){ //再将<img>挷定一个事件
$(“#show”).append(“<div>点击事件2</div>”);
}).bind(“click”,function(){ //再将<img>挷定一个事件
$(“#show”).append(“<div>点击事件3</div>”);
}); //等于同时将<img>挷定了3个事件
$(“input[type=button]”).click(function(){ //button的点击事件
$(“img”).unbind(“click”, fnFunction1); //移除<img>事件监听fnFunction1
});
});
15. 元素的显示和隐藏
15．1 show()和hide()
$(function(){
$(“input:first”).click(function(){ //点击第一个<input>时隐藏<p>
$(“p”).hide();
});
$(“input:last”).click(function(){ //点击最后一个<input>时显示<p>
$(“p).show();
});
//任何元素都有hide()和show()方法
})
16. 渐入渐出的变幻
16．1 再探show()和hide()
$(function(){
$(“input:first”).click(function(){ //点击第一个<input>时隐藏<p>
$(“p”).hide(3000); //隐藏时耗3秒钟
});
$(“input:last”).click(function(){ //点击最后一个<input>时显示<p>
$(“p).show(3000); //显示时耗3秒钟
});
//任何元素都有hide()和show()方法
})
16．2 fadeIn()和fadeOut()
$(function(){
$(“input:eq(0)”).click(function(){
$(“img”).fadeOut(3000); //逐渐消失
});
$(“input:eq(1)”).click(function(){
$(“img).fadeIn(1000); //逐渐显示
}
})
17. SlideUp()和slideDown()模拟ppt中的拉窗帘特效
$(function(){
$(“input:eq(0)”).click(function(){
$(“div”).add(“img”).slideUp(1000); //窗帘收起效果
});
$(“input:eq(1)”).click(function(){
$(“div”).add(“img”).slideDown(3000); //窗帘显示效果
});
})
18. $.browser对象
Function detect(){
If($.browser.msie){
Return “IE”;
}
If($.browser.mozilla){
Return “Mozilla”;
}
If($.browser.safari){
Return “Safari”;
}
If($.browser.opera){
Return “Opera”;
}
}
Var sBrowser = detect();
Document.write(“您的浏览器是”+sBrowser+”<br>版本为”+$.browser.version);
19. $.boxModel对象
Var sBox = $.boxModel ? “标准W3C” : “IE”;
Document.write(“您的页面目前支持：”+sBox+”盒子模型”);
20. $.each()遍历
$.each(object,fn); //object是遍历的集合，fn是函数，fn将对object中的每一个对象进行执行
Var array = [“one”,”two”,”three”,”four”,”five”];
$.each(array,function(iNum,value){
Document.write(“序号：”+iNum+”值：”+value+”<br>”); //针对数组，iNum表示索引
});
Var obj = {one:1,two:2,three:3,four:4,five:5};
$.each(obj,function(property,value){
Document.write(“属性：”+property+”值：”+value+”<br>”); //针对对象
});
获取未知对象的信息
$.each($.browser,function(property,value){
//$.browser对象我们并不清楚，通过这个方法可以知道它所有的属性
Document.write(“属性：”+property+”值：”+value+”<br>”);
});
21. 数据过滤
Var array = [3,5,2,5,6,6,7,8,9,1,6];
Var result = $.grep(array,function(value){ //value就是array中的值
Return value > 4; //将大于4的值取出放在result中
});
Document.write(“array:”+array.join()+”<br>”); //join()方法是取数组中的所有元素
Document.write(“result:”+result.join());
22. 数组的转化
Var array = [“a”,”b”,”c”,”d”,”e”];
$(“p:eq(0)”).text(array.join()); //将数组array中所有值放在第一个<p>元素中
Array = $.map(array,function(value,index){ //index是数组array的索引
Return (value.toUpperCase()+index);
});
$(“p:eq(1)”).text(array.join());
Array = $.map(array,function(value,index){
Return value+value;
});
$(“p:eq(2)”).text(array.join());
23. 获取异步数据(Ajax)
JQuery的load()方法
Function startRequest(){
$(“#target”).load(“14-1.aspx”); //把服务器返回信息放在” #target”中
}
24. GET VS POST
$.get(url,[data],[callback]);
$.post(url,[data],[callback],[type]); //type是期待服务器返回的类型
Function creatQueryString(){
Var firstName = encodeURI($(“#firstName”).val());
Var birthday = encodeURI($(“#birthday”).val());
Var queryString = {firstName:firstName,birthday:birthday};
Return queryString;
}
Function doRequestUsingGET(){
$.get(“14-5.aspx”,createQueryString(),
//发送GET请求
function(data){
$(“#serverResponse”).html(decodeURI(data));
}
);
}
Function doRequestUsingPOST(){
$.post(“14-5.aspx”,createQueryString(),
//发送post请求
Function (data){</span
分享到：
相关推荐
《jQuery小结》 在Web开发领域，jQuery是一款极为重要的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。本篇文章将深入探讨jQuery的核心知识点，包括选择器与筛选方法、样式操作、效果展示、DOM...
**jQuery1.4.1 小结** jQuery 是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本文中，我们将深入探讨jQuery 1.4.1版本的一些核心特性、改进和常用API。 #...
### jQuery Mobile 经验小结 #### 一、概述 jQuery Mobile 是一款基于 HTML5 的移动设备框架，它为开发者提供了构建响应式网站、应用程序的能力。通过使用 jQuery Mobile，可以轻松地创建适用于不同屏幕尺寸的网页...
### Jquery.validate表单验证详解 #### 一、引言 在Web开发中，表单验证是确保数据质量的关键步骤。传统的JavaScript表单验证方法往往冗长且难以维护，而jQuery Validate插件则以其简洁、高效及易于扩展的特性成为...
jQuery 动画jQuery 提供了多种方法来创建动画效果，如 fadeToggle(), fadeIn(), fadeOut(), slideToggle(), slideUp(), slideDown() 等。例如，要淡入淡出一个段落，我们可以这样编写代码： $("#fade").click...
### Jquery使用小结 #### 一、Jquery简介与基础使用 JQuery 是一款流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等开发工作。通过本文，我们将对 JQuery 的基础知识进行总结，并...
总结来说，jQuery插件开发中的五种形态小结通过一系列的示例和说明，为开发者展示了如何创建一个高效、可维护的插件。这五个形态涉及到了代码的独立性、链式操作、插件的可配置性、生命周期的管理、无冲突处理以及...
这篇博客"jquery取单选，复选，下拉小结"是关于如何使用jQuery来操作网页中的单选按钮（radio）、复选框（checkbox）以及下拉列表（select）的选择项。下面我们将详细探讨这些知识点。 首先，我们来讨论如何使用...
《JQuery可编辑表格小结》 在网页开发中，数据展示往往需要用到表格，而让表格中的数据可编辑则能极大地提升用户体验。JQuery库以其简洁的API和强大的功能，成为了实现这一目标的理想选择。本文将对使用JQuery构建...
在本文中，作者通过个人使用jQuery的实践经验，总结出了五个重要知识点，让我们一起来探讨一下这些知识点的具体内容。 1. jQuery对象与原生DOM对象的互转...希望本文作者的经验小结，能为你的jQuery学习之旅带来便利。
NULL 博文链接：https://chenzheng8975.iteye.com/blog/1616594
《这些年，我收集的JQuery代码小结》 在网页开发中，jQuery作为一个强大的JavaScript库，极大地简化了DOM操作、事件处理以及动画效果的实现。本文将总结一些实用的jQuery代码片段，帮助开发者提高效率，优化代码...
jQuery是一个快速、小巧的JavaScript库，它封装了JavaScript的动画效果和Ajax等技术，简化了这些技术在使用时的操作。在现代Web开发中，AJAX技术用于实现页面的异步更新，jQuery通过提供的一系列AJAX相关方法，极大...
11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. 重写 JS 实验之员工管理 17. 克隆和替换节点 18. 包裹节点 19. html() 方法 & val() 方法 20. 小结2 21. CSS ...
### JQuery选择器特辑详细小结 #### 一、基本选择器 基本选择器是JQuery中最基础也是最常用的选择器，通过元素的ID、类名（Class）和标签名等来查找DOM元素。基本选择器主要包括： - ID选择器：通过元素ID来选取...
尚硅谷_佟刚_jQuery_第一天小结【】12.尚硅谷_佟刚_jQuery_选择器的练习【】13.尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
jQuery，作为一款广泛使用的JavaScript库，提供了丰富的API和简洁的语法来操作DOM、处理事件以及实现动画效果。这里我们将深入探讨jQuery的一些注意事项和常用语法，这对于任何正在学习或使用jQuery的人来说都是十分...
今天为大家推荐的是2013年的第一期，在这期里面十个jQuery插件涵盖了响应式的网格布局插件、图片放大插件、表单元素中自定义select插件，google 地图插件、文件拖放上传插件、tooltip提示插件、3D旋转菜单等等
jQuery树形控件zTree是一款基于jQuery的多功能树形控件插件，它广泛应用于Web开发中，提供了一个方便的方式来实现树状数据结构的展示与管理。zTree具备优异的性能，支持灵活的配置选项，并能够与多种功能组合使用，...