码迷,mamicode.com
首页 > Web开发 > 详细

Web前端开发——JQuery基础梳理

时间:2014-12-09 17:57:06      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:javascript   web前端开发   ajax   css   jquery   

    JQuery是由美国人John Resig于2006年创建的一个开源项目,随着人们的熟知,越来越多的程序高手加入其中,
完善和壮大其项目内容;如今已发展成为JavaScript、CSS、DOM、AJAX于一体的强大框架体系。jQuery是一个兼容多
浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。
    下面先用一张图总体概括一下。   


bubuko.com,布布扣

    下面对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前端开发——JQuery基础梳理

标签:javascript   web前端开发   ajax   css   jquery   

原文地址:http://blog.csdn.net/zhangzijiejiayou/article/details/41824485

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!