Web前端开发——JQuery基础梳理
2014-12-09 15:43
579 查看
JQuery是由美国人John Resig于2006年创建的一个开源项目,随着人们的熟知,越来越多的程序高手加入其中,
完善和壮大其项目内容;如今已发展成为JavaScript、CSS、DOM、AJAX于一体的强大框架体系。jQuery是一个兼容多
浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。
下面先用一张图总体概括一下。
下面对JQuery一些基础知识介绍一下。
1.$
在JQuery中使用最多的莫过于“$”了,无论是页面元素的选择、功能函数的前缀都需使用该符号,是JQuery程
序的标志。
(1) ${表达式}:根据这个表达式来查找所有匹配的元素。
(2)$(html标记字符串) :根据提供的html字符串,创建jquery对象包装的dom元素。
(3)$(dom元素):将一个或多个dom元素转换为jquery对象。
(4)$(document).ready(function(){})==$(function(){}); //在页面加载完成后自动执行的代码。
2.操作CSS
个人点睛
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。做了几个例子,感觉JQuery真的和
它的宗旨相吻合write less,do more.目前对JQuery的理解还不是很到位,请大家拍砖指正。
完善和壮大其项目内容;如今已发展成为JavaScript、CSS、DOM、AJAX于一体的强大框架体系。jQuery是一个兼容多
浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。
下面先用一张图总体概括一下。
下面对JQuery一些基础知识介绍一下。
1.$
在JQuery中使用最多的莫过于“$”了,无论是页面元素的选择、功能函数的前缀都需使用该符号,是JQuery程
序的标志。
(1) ${表达式}:根据这个表达式来查找所有匹配的元素。
<span style="font-family:KaiTi_GB2312;font-size:18px;"> eg:$("div>p"); // 查找所有p元素,且这些p元素都是div的子元素. $("input:radio",document.forms[0]); //查找文档第一个表单中,所有的单选按钮。 $("div",xml.responseXML); //在一个由ajax返回的xml文档中,查找所有的div元素。</span>
(2)$(html标记字符串) :根据提供的html字符串,创建jquery对象包装的dom元素。
<span style="font-family:KaiTi_GB2312;font-size:18px;">eg: $("<div><p>Hello</p></div>").appendTo("body"); $("<input type='text'>") //创建一个 <input> 元素必须同时设定 type 属性</span>
(3)$(dom元素):将一个或多个dom元素转换为jquery对象。
<span style="font-family:KaiTi_GB2312;font-size:18px;">eg: $(document.body).css( "background", "black" ); //设置页面背景色</span>
(4)$(document).ready(function(){})==$(function(){}); //在页面加载完成后自动执行的代码。
2.操作CSS
<span style="font-family:KaiTi_GB2312;font-size:18px;">$("p").addClass("selected"); //为每个匹配的元素添加指定的类名 $("p").removeClass("selected"); //从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名,请用空格分开 $("p").removeClass(); //删除匹配元素的所有类 $("p").toggleClass("selected"); //如果存在(不存在)就删除(添加)一个类 $("p").css("color"); // 取得第一个段落的color样式属性的值 $("p").css({ color: "#ff0011", background: "blue" }); //把一个“名/值对”对象设置为所有匹配元素的样式属性。 $("p").css("color","red"); //在所有匹配的元素中,设置一个样式属性的值</span>
个人点睛
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。做了几个例子,感觉JQuery真的和
它的宗旨相吻合write less,do more.目前对JQuery的理解还不是很到位,请大家拍砖指正。
相关文章推荐
- Web前端开发基础知识--部分总结
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十四】
- Web前端开发规范文档你需要知道的事(转自www.jqueryba.com)
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十五】
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十九】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十五】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十五】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十四】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】
- 【免费】TUP大师系列---jQuery之父畅谈Web前端开发【SD软件开发2.0大会门票等你拿!】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十四】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十三】
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】