(很久前图书馆借的一本jquery的书,过期了,今晚拿点时间总结一下,写了这篇博客,明天得还书了!)
jquery, 官网:http://jquery.com/。目前最新版本:jquery-1.4.4,可在官网上下载,有两种:jquery-1.4.4.js和jquery-1.4.4.min.js,前者比较全,后者只包含一些主要的功能。
一、DOM
document object model,即文档对象模型,可以看成是层次结构组织的节点或者信息的组合。该层次结构允许开发人员在树中导航寻找特定信息。网页中的各个元素可以看成是一个dom元素,从某种意义上看,DOM可以说是专门为了解决各种不同版本的javascript之间冲突百产生的。
二、jQuery选择器:
$("#theId")根据一个id得到一个dom对象
$(".theClass")根据一个class得到一个dom对象
$(document).ready(function(){ }); //在页面加载时运行的函数
$("#theId").click(function(){ }); //点击事件,不只是按钮,还有其它很多种dom都可以响应
$(".cls1,.cls2").addClass("green"); //其中green是css,完整:.green{background-color:green; }
$("form label") //得到form里面的所有label
$("form > label") //得到form里面的直接label子孩子
$("form + label") //得到form相邻的label元素
$("form ~ label") //得到form之后 所有平级的label元素
$("tr:first") //得到表格第一行,即第一个tr
同样还有$("tr:last") , $("tr:even")偶数行 , $("tr:odd")奇数行, $("tr:eq(1)")第二行, $("tr:gt(2)")大于第二行, $("tr:lt(1)")小于第二行, $("tr:empty")空行,与之相反的 $("tr:parent")所有非空行,$("tr:hidden")隐藏行,$("tr:visible")可以行
内容过滤:
$("div .test:contains('mycontent')")//所有包含mycontent内容的都会被选中。
$("div .test:has(p)")//class="test"的div中内含<p>元素的都会被选中
$("div .test:not(.mycls)")
$("ul li:nth-child(2)") //选中ul里面的第二个li
$("ul li:nth-child(3n)") //选中ul里面的第三、六、九……个li
$("ul li:first-child") //选中ul里面的第一个li
$("ul li:last-child") //选中ul里面的最后一个li
$("#mydiv ul li:only-child") //选中mydiv里只有一个li的ul
$(":input") //选中所有的input元素
$("input:enabled")
$("input:disabled")
$("input:checked")
$("select option:selected")
$("input[class]") //有class属性的input
$("input[name=thename]")
$("input[name!=thename]")
$("input[name^=first]") //以first开头
$("input[name$=name]") //以name结尾
$("input[name*=stna]") //模糊匹配
三、设置属性
$("input").attr("name")//得到name属性
$("#mydiv").css("margin") //得到css
$("input").attr("value","内容") //设置属性
$("#mydiv").css("margin-top","10px") //添加css
$("#mydiv").css({
"margin-top":"10px",
"color":"green"
})
$("input").attr("value",function(){return this.name})
移除属性
$("input").removeAttr("value")
操作css
$("input").addClass("myclass")
$("input").removeClass("myclass")
$("input").toggleClass("myclass") //添加或删除
$("#content p#second").offset().top //取得坐标的上位置
$("#content p#second").height() //获得
$("#content p#second").height(80) //设置
设置内容
$("#content").html()
$("#content").html("这是新加上的文字")
$("#content").text() //只得到文本内容
$("#userName").val("ling")
$("#multiple").val(["青岛","北京"])//设置列表中的选中项
加上filter
$("p").filter(".first").css("background-color","green")
$("p").not(".first").css("background-color","green")
$("input #firstname").next().addClass("green")
$("input #firstname").next("#city").addClass("green")
四、dom操作
插入
$("#testbtn").append("<b>测试</b>");
$("#testbtn").prepend("<b>测试</b>");
$("#testbtn").after("<b>测试</b>"); //插入到后面
$("#testbtn").before("<b>测试</b>"); //插入到前面
包裹
$("#testbtn").wrap("<div class='wrapped'></div>");
$("#testbtn").wrap("<b></b>");
替换
$("#mydiv .test").replaceAll($("p")); //用class="test"的dom替换<p>
$("#mydiv .second").replaceWith($("#mydiv .test"));
删除
$("#mydiv .second").empty();
$("p").remove("#second")
clone
$("#myBtn").clone().prependTo($("p #second")); //可以把按钮及其所有相关的属性等一起复制过去
$("#myBtn").clone().insertAfter(this);
五、事件
绑定事件
$("#myBtn").bind("click",function(){ $(this).val(""); }); //绑定事件,清空
$("#myBtn").unbind()
触发
(1)$("form").bind("submit",function(){……});
(2)$("#test").click(function(){ $("form").trigger("submit");}) //当点击test内容时,会触发form的提交
或
(1)$("#test").click(function(event,par1,par2){……})
(2)$("#test").trigger("click",["Hello","World"]);
$("#test").show() //还有hide()
$("#test").toggle(
function(){alert("第一次点击")},
function(){alert("第二次点击")},
function(){alert("第三次点击")},
function(){alert("第四次点击")}
);
其它事件:
dblclick
mousedown
mousemove
mouseout
mouseover
mouseup
keydown
keypress
keyup
blur
focus
六、动画与效果
$("test").hide("slow") //"normal","fast"
$("test").hide(2000) //2s
还可以加函数:$("test").hide(2000,funtion(){ });
show也和上面一样
一样的还有:
slideUp() //向上卷起
slideDown()
slideToggle()
fadeIn() //淡入
fadeOut() //淡出
自定义透明度:fadeTo(2000,0.2)或fadeTo(2000,0.2,function(){ })
$("test").animate({height:'toggle', opacity:'toggle'},"slow"); //toggle表示 在有和无之间切换
动画队列
会按顺序依次执行
$("test").animate({height:'70%'},{queue:false, duration:2000}) //queue:false表示不按队列的顺序来
.animate({font-size:'5em'},{queue:false, duration:2000})
.animate({paddingLeft:'20px'},{queue:false, duration:2000})
分享到:
相关推荐
**jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...
6. **总结** jQuery降低了JavaScript开发的复杂度,提高了开发效率,尤其在DOM操作、事件处理和Ajax交互方面表现突出。无论是初学者还是经验丰富的开发者,jQuery都能作为一个强大的工具,提升开发体验和项目质量。...
### jQuery 总结 #### 一、jQuery与普通JavaScript操作的区别及注意事项 1. **标记符号**:在jQuery中,`$`符号被用来作为jQuery的标记,这实际上是对jQuery对象的一个引用,可以看作是一种类型转换的方式。通过...
**jQuery 全集:深入理解与实践** jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画制作以及 AJAX 交互。本资料旨在全面覆盖 jQuery 的核心概念和实用技巧,通过...
JQuery总结.docx - 快捷方式.lnk
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...
目录: 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作:取值和赋值 5.元素的操作:移动 6.元素的操作:复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果
**jQuery 知识总结** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及Ajax交互。jQuery 的核心特性可以概括为:选择器、DOM操作、事件处理、...
**jQuery 全集与总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务。自2006年发布以来,jQuery 已经成为了前端开发中不可或缺的一部分,因其简洁的API和...
jQuery是对JavaScript的封装,使用jQuery可以简化很多之前的JavaScript代码,简化开发 本人学习jQuery是通过xmind这款软件来记载的 现在把资源贡献给大家,希望给更多的人更深入的了解jQuery 也可以查询我的博客看...
总结来说,jQuery通过其高效、易用的特性,改变了JavaScript开发的格局,成为Web开发领域不可或缺的一部分。通过深入学习和实践,开发者可以更好地利用jQuery提升工作效率,构建出更富交互性的Web应用程序。
**jQuery 技巧总结** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画制作和Ajax交互等任务。自2006年发布以来,jQuery 已经成为 web 开发不可或缺的一部分。这篇总结将探讨一些...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...
本文将深入探讨2022年jQuery的总结,包括其概念、优点、基本使用方法以及与DOM对象的区别。 首先,jQuery是由John Resig于2006年创立的,它是最受欢迎的JavaScript库之一。jQuery的设计理念是"write less, Do more...
jQuery 入门总结 本章节主要介绍了 jQuery 的概述、基本使用、优点、入口函数、DOM 对象和 jQuery 对象的区别等知识点。 1. jQuery 概述 jQuery 是一个 JavaScript 库,由 John Resig 于 2006 年创建,是目前最...
本总结将深入探讨jQuery的核心知识点,包括选择器、DOM操作、事件处理和Ajax应用。** ### 一、jQuery选择器 jQuery 的选择器基于CSS,允许开发者通过简单的语法选取DOM中的特定元素。常见的选择器有: 1. **基本...