jQuery语法及事件函数总结

╰+攻爆jí腚メ 2022-06-09 23:47 189阅读 0赞

jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它凭借简洁的语法和跨平台的兼容性，极大地简化了 JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业余爱好者还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够的理由去学习JQuery。

jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事。

## **1、jQuery的功能** ##

-HTML元素选取  
　　-HTML元素操作  
　　-CSS 操作  
　　-HTML 事件函数  
　　-JavaScript 特效和动画  
　　-HTML DOM 遍历和修改  
　　-AJAX  
　　-Utilities  
　　引用jQuery：将下载的jQuery文件放在网页的同一目录下，然后才能使用jQuery。

## **2、jQuery语法** ##

### **元素选择器** ###

jQuery选择器参见此前转载的一篇博客[jQuery选择器完全总结][jQuery]

### **文档就绪事件** ###

我们的js代码都需要等文档加载完毕后才开始执行js代码。在jQuery中，所有 jQuery 函数位于一个 document.ready函数中，这是文档就绪事件。

$(document).ready(function(){
    
       // 开始写 jQuery 代码...
    
    });

其实使用jQuery时，最常见的情况是像下面这样开始写脚本的：

$(function(){ 
          // do something 
    });
    //$(function()){}是jQuery的方法，等价于$(document).ready(function(){}))
    //$(document).ready(function(){})；$().ready(function(){})；和$(function(){})三者都是一样的，
    //最完整的写法是：$(document).ready(function(){})，ready()函数仅能用于当前文档，因此无需选择器。
    //所以document选择器可以不要，那么就可以写成：$().ready(function(){})
    //最后$的默认事件就是ready，所以，ready也可以省略，写成：$(function(){});

两种写法脚本开始的写法完全等价。ready事件在DOM结构绘制完成之后就会执行，这样能确保就算有大量的媒体文件没加载出来，js代码一样可以执行。

### **dom对象与jQuery对象相互转换** ###

<head>
         <script src="jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <input id="username" type="text" value="zhangsan" >
        <script type="text/javascript"> //获取的是dom对象 var n = document.getElementById("username"); //将dom对象转换成jQuery对象的语法：$(dom对象) //建议jQuery对象以$符开头命名 var $x = $(n); console.log($x.val()); </script>
    </body>

jQuery对象内部是一个数组，比如我们获取所有文本框，然后得到一个jQuery对象，其实这个对象内部是数组。直接使用数组下标获得数组中的一个元素就得到了dom对象。

<body>
        <input id="username" type="text" value="zhangsan" >
        <script type="text/javascript"> var n = document.getElementById("username"); //获取jQuery对象 var $n = $(n); //两种方式，将JQuery对象转换成dom对象 var n1 = $n[0]; //直接使用数组下标获得dom对象 var n2 = $n.get(0); //使用jQuery对象的get方法 console.log(n1.value); console.log(n2.value); </script>
    </body>

### **元素属性设置与获取** ###

attr(name) 获取指定属性名的值  
　　attr(name) 获取指定属性名的值  
　　attr(key,value) 给一个指定属性设置值  
　　removeAttr(name) 移除指定属性

<body>
        <input type="text" name="text1"><br>
        <script type="text/javascript"> $(document).ready(function(){ //使name为text1的文本框不可用 $("input[name='text1']").attr("disabled","disabled"); //使其可用 $("input[name='text1']").removeAttr("disabled"); }); </script>
    </body>

val() 获取value值  
　　val(“xxx”) 给value设置值  
　　text() 获取文本值  
　　text(“xxx”)设置文本值  
　　html() 获取html代码  
　　html(“xxx”)设置html代码

<body>
        <div name="div1">
            <a>aaa</a>
        </div>
        <script type="text/javascript"> $(document).ready(function(){ console.log($("div").html()); //获取到的内容是<a>aaa</a>，如果是text，则只获取aaa }); </script>
    </body>

通过jQuery还可设置元素的CSS  
　　css(name) 获取指定名称的css值  
　　css(name,value) 给指定名称的css属性设置值  
　　css(\{“propertyname”:”value”,”propertyname”:”value”,…\}) 给多个css属性设置值

<body>
        <div style="background:gray;width:100px;height:100px;"></div><br>
        <input type="button" id="btn" value="按钮">
        <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ $("div").css("background-color","red"); }); }); </script>
    </body>

### **添加和删除元素** ###

元素的添加分为内部添加和外部添加两种：

A.append(B) 将B插入到A的内部后面 
    <A>
        ...
        ...
        <B></B>
    </A>
    
    A.prepend(B) 将B插入到A的内部前面
    <A>
        <B></B>
        ...
        ...
    </A>
    A.appendTo(B) 将A插入到B的内部后面
    A.preendTo(B) 将A插入到B的内部前面
    
    A.after(B)将B插入到A后面(同级)
    <A></A>
    <B></B>
    A.before(B)将B插入到A前面 
    <B></B>
    <A></A>
    A.insertAfter(B) 将A插入到B后面(同级)
    A.insertBefore(B) 将A插入到B前面

内部添加元素示例：

<body>
        <ul id="ul1">
            <li id="bj">北京</li>
            <li id="sh">上海</li>
            <li id="tj">天津</li>
        </ul>
        <br>
        <ul id="ul2">
            <li id="hn">河南</li>
            <li id="sd">山东</li>
            <li id="gz">广州</li>
        </ul>
        <br>
        <input type="button" id="btn1" value="按钮">
        <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ //将上海添加到ul2中 var $sh=$("#sh"); var $ul2=$("#ul2"); $ul2.append($sh); }); }); </script>
    </body>

外部添加元素示例：

<body>
        <ul id="ul1">
            <li id="bj">北京</li>
            <li id="sh">上海</li>
            <li id="tj">天津</li>
        </ul>
        <br>
        <ul id="ul2">
            <li id="hn">河南</li>
            <li id="sd">山东</li>
            <li id="gz">广州</li>
        </ul>
        <p id="p1">第一句话</p>
        <p id="p2">第二句话</p>
        <p id="p3">第三句话</p>
        <br>
        <input type="button" id="btn1" value="按钮">
        <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ //将ul2插入到p2的后面 var $p2=$("#p2"); var $ul2=$("#ul2"); $p2.after($ul2); }); }); </script>
    </body>

删除元素的函数主要如下：  
　　 empty()清空标签体  
　　 remove()删除当前对象，移除绑定事件和绑定数据  
　　 detach()删除当前对象，保留绑定事件和绑定数据

清空标签体示例如下：

<body>
        <p id="p1">第一句话</p>
        <p id="p2">第二句话</p>
        <p id="p3">第三句话</p>
        <br>
        <input type="button" id="btn1" value="按钮">
        <script type="text/javascript"> $(document).ready(function(){ //点击按钮，清空p2内容 $("#btn1").click(function(){ var $p2=$("#p2"); $p2.empty(); }); }); </script>
    </body>

删除对象示例如下：

<body>
        <p id="p1">第一句话</p>
        <p id="p2">第二句话</p>
        <p id="p3">第三句话</p>
        <script type="text/javascript"> $(document).ready(function(){ $("#p1").click(function(){ alert("哈哈"); }); //先删除p1元素，再将p1添加到p3后面 //用detach删除，保留绑定事件，点击有效果 var $p1=$("#p1").detach(); //用remove删除，不保留绑定事件，点击无效 //var $p1=$("#p1").remove(); $("#p3").after($p1); }); </script>
    </body>

### **复制和替换元素** ###

clone(Events)：复制元素，Events是一个boolean值，为true时表示同时复制对象的事件，默认为false。

<body>
        <input type="button" id="btn1" value="按钮">
        <p id="p1">第一句话</p>
        <p id="p2">第二句话</p>
        <p id="p3">第三句话</p>
        <script type="text/javascript"> $(document).ready(function(){ //点击按钮，复制当前元素，并添加在body内部后面 $("#btn1").click(function(){ var $new=$(this).clone(); $("body").append($new); }); }); </script>
    </body>

A.replaceWith(B)表示用B替换A  
　　 A.replaceAll(B)表示A替换B

<body>
        <input type="button" id="btn1" value="按钮">
        <p id="p1">第一句话</p>
        <p id="p2">第二句话</p>
        <p id="p3">第三句话</p>
        <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ //将所有p标签用<a>xxx</a>替换 $("p").replaceWith("<a>xxx</a>"); }); }); </script>
    </body>

### **过滤元素** ###

jQuery中进行元素过滤的函数较多：

eq(index|-index):
    index：整数，从开头获得指定索引的元素。索引从0开始，0表示第一个
    -index：负数，从尾部获得指定索引的元素。索引从-1开始，-1表示最后一个
    first()     选择第一个元素 
    last()      选择最后一个元素 
    is()        用于判断 
    hasClass()  判断是否含有指定class。<xxx  class="xx">  
    filter()    筛选出指定表达式匹配的元素集合，返回符合一定条件的元素 
    not()       不符合条件的元素将从选择中返回，符合条件的元素将被移除 
    has()       返回拥有指定子元素的元素。 
    slice(start,end)  截取元素，包含头不包含尾slice(2,4),则筛选2和3元素

例1：

<body>
        <div style="background:gray;width:100px;height:100px;"></div><br>
        <div style="background:gray;width:100px;height:100px;"></div><br>
        <div style="background:gray;width:100px;height:100px;"></div><br>
        <div style="background:gray;width:100px;height:100px;"></div><br>
        <input type="button" id="btn" value="按钮">
        <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //选择索引为2的div，索引从0开始 $("div").eq(2).css("background-color","red"); //选择第一个div $("div").first().css("background-color","yellow"); //选择最后一个div $("div").eq(-1).css("background-color","blue"); }); }); </script>
    </body>

例2：

<body>
        <div style="background:gray;width:100px;height:100px;" class="div1"></div><br>
        <div style="background:gray;width:100px;height:100px;"><p>China</p></div><br>
        <div style="background:gray;width:100px;height:100px;"></div><br>
        <div style="background:gray;width:100px;height:100px;" class="div4"></div><br>
        <input type="button" id="btn" value="按钮">
        <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //判断第一个div class属性是不是div1 alert($("div").first().is(".div1")); //判断最后一个div class是否是div4 alert($("div").last().hasClass("div4")); //选择含有p元素的div $("div").has("p").css("background-color","red"); }); }); </script>
    </body>

例3：

<body>
        <div style="background:gray;width:100px;height:100px;" class="div1"></div><br>
        <div style="background:gray;width:100px;height:100px;"><p>China</p></div><br>
        <div style="background:gray;width:100px;height:100px;"></div><br>
        <div style="background:gray;width:100px;height:100px;" class="div4"></div><br>
        <input type="button" id="btn" value="按钮">
        <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //筛选有class属性的div $("div").filter("[class]").css("background-color","red"); //筛选没有class属性的div $("div").not("[class]").css("background-color","yellow"); }); }); </script>
    </body>

例4：

<body>
        <div style="background:gray;width:100px;height:100px;" class="div1"></div><br>
        <div style="background:gray;width:100px;height:100px;"><p>China</p></div><br>
        <div style="background:gray;width:100px;height:100px;"></div><br>
        <div style="background:gray;width:100px;height:100px;" class="div4"></div><br>
        <input type="button" id="btn" value="按钮">
        <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //截取第2.3个div $("div").slice(1,3).css("background-color","red"); }); }); </script>
    </body>

## **3、jQuery事件** ##

常用的jQuery事件函数罗列如下：

blur() 失去焦点 change() 选择改变时候触发事件，例如select列表 click() 单击 dbclick() 双击 focus() 获得焦点 keydown() 键盘按下的过程 keypress() 键盘按到底时 keyup() 键盘弹起 mousedown() 鼠标按下 mousemove() 鼠标移动 mouseout() 鼠标移出指定元素 mouseover() 鼠标移入指定元素 mouseup() 鼠标弹起 resize() 改变大小，例如窗体改变大小 scroll() 滚动条滚动 select() 选择 submit() 提交 unload() 页面卸载，页面关闭时 focusin() 获得焦点,跟focus区别在于，他可以在父元素上检测子元素获取焦点的情况。例如父元素内部有一个子元素，当焦点在子元素时，会触发fucusin。但是不会触发focus。 focusout() 失去焦点，跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。例如父元素内部有一个子元素，当子元素失去焦点时，会触发fucusout。但是不会触发blur。 mouseenter() 鼠标移入,跟mouseover事件不同，只有在鼠标指针移入被选元素时，才会触发mouseenter事件。如果鼠标穿过被选元素的子元素，不会触发，但是会触发mouseover事件。 mouseleave() 鼠标移出,跟mouseout事件不同，只有鼠标指针离开被选元素时，才会出发mouseleave事件。如果鼠标指针离开被选元素的子元素，不会触发，但是会触发mouseout事件。

常用事件函数例子：

<body>
        <input id="e01" type="text" /><span id="textMsg"></span> 
        <hr>
        <div id="e02" ></div><span id="divMsg"></span> 
        <hr>
        <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span>
        <script type="text/javascript"> $(document).ready(function(){ $("#e01").blur(function(){ $("#textMsg").html("文本框失去焦点：blur"); }).focus(function(){ $("#textMsg").html("文本框获得焦点：focus"); }).keydown(function(){ $("#textMsg").append("键盘按下：keydown"); }).keypress(function(event){ $("#textMsg").append("键盘按下：keypress"); }).keyup(function(){ $("#textMsg").append("键盘按下：keyup"); }); //记录移动的次数 var i = 0; $("#e02").mouseover(function(){ $("#divMsg").html("鼠标移上：mouseover"); }).mousemove(function(){ $("#divMsg").html("鼠标移动：mousemove , " + i++ ); }).mouseout(function(){ $("#divMsg").html("鼠标移出：mouseout"); }).mousedown(function(){ $("#divMsg").html("鼠标按下：mousedown"); }).mouseup(function(){ $("#divMsg").html("鼠标弹起：mouseup"); }); $("#e03").click(function(){ $("#buttonMsg").html("单击：click"); }).dblclick(function(){ $("#buttonMsg").html("双击：dblclick"); }); }); </script>
    </body>

## **4、jQuery动画效果** ##

常用效果函数如下：

显示与隐藏
    show([speed],[function]) 显示 hide([speed],[function]) 隐藏。 toggle([speed],[function]) 在hide()和show()方法之间切换 滑动 slideDown([speed],[function]) 通过调整高度来滑动显示被选元素 slideUp([speed],[function]) 通过调整高度来滑动隐藏被选元素 slideToggle([speed],[function]) 在slideDown()和slideUp()方法之间切换 淡入淡出 fadeIn(speed,callback) 淡出显示 fadeOut(speed,callback) 淡入隐藏 fadeToggle(speed,callback) 在fadeIn()和fadeOut()方法之间切换 fadeTo(speed,opacity,callback) 允许渐变为指定的透明度。 opacity指定透明度，在0与1之间；speed指定显示的时间，单位是毫秒。

示例：

<head>
        <style type="text/css"> div{ border:1px solid #000; width:100px; height:100px; } </style>
    </head>
    <body>
        <input type="button" id="b1" value="显示/隐藏 b1Div" />
        <div id="b1Div"></div> 
        <hr>
        <input type="button" id="b2" value="滑出/滑入b2Div"/>
        <div id="b2Div"></div> 
        <hr>
        <input type="button" id="b3" value="淡出/淡入b3Div" />
        <div id="b3Div"></div>
        <hr>
        <input type="button" id="b4" value="设定指定的透明度b4Div" />
        <div id="b4Div"></div>
        <script type="text/javascript"> $(document).ready(function(){ //点击按钮1是隐藏和显示 $("#b1").click(function(){ $("#b1Div").toggle("1000"); }); //点击按钮2，是滑动 $("#b2").click(function(){ $("#b2Div").slideToggle("slow"); }); //点击按钮3，是淡入淡出 $("#b3").click(function(){ $("#b3Div").fadeToggle("slow"); }); //点击按钮4，设定指定透明度 $("#b4").click(function(){ $("#b4Div").fadeTo("slow",0.25); }); }); </script>
    </body>

## **5、jQuery的Ajax** ##

关于jQuery提供的ajax方法，可移步至另一篇博客[AJAX及其在JavaScript中的应用][AJAX_JavaScript]

[jQuery]: http://blog.csdn.net/fuzhongmin05/article/details/72780075
[AJAX_JavaScript]: http://blog.csdn.net/fuzhongmin05/article/details/72851111