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

JQuery是由美国人John Resig于2006年创建的一个开源项目，随着人们的熟知，越来越多的程序高手加入其中，

完善和壮大其项目内容；如今已发展成为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的理解还不是很到位，请大家拍砖指正。