首页 > 代码库 > Web前端开发——JQuery基础梳理

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

2024-08-07 01:20:37   219人阅读

    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的理解还不是很到位，请大家拍砖指正。

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


联系
我们