JQuery目录
JQuery是一个javascript的框架，是对javascript的一种封装。
通过JQuery可以非常方便的操作html的元素
0.前情引入
1.$( ) 是什么
$() 是 jQuery 的核心标识符，它标志着这段代码使用了 jQuery 库。
$ 是 jQuery 的全局函数别名，等同于 jQuery()，它用于选取 DOM 元素或创建 jQuery 对象，用于简化 DOM 操作和事件处理。
- 2.
$()的常见用途
（1）DOM 选择器
$("#header") // 选择 id="header" 的元素
$(".btn") // 选择所有 class="btn" 的元素
$("div > p") // 选择 div 下的直接子元素 p
（2）文档就绪事件
$(function() {
// DOM 加载完成后执行
});
// 等同于
$(document).ready(function() {});
（3）DOM 元素创建
$("<div>Hello</div>") // 创建一个新的 div 元素
（4）扩展功能
$.ajax({...}) // 调用 jQuery 的 AJAX 方法
-
- 为什么
$能代表 jQuery？
- 为什么
jQuery 库在初始化时会将自身绑定到全局变量 $ 和 jQuery：
// jQuery 源码简化逻辑
window.jQuery = window.$ = jQuery;
如果其他库（如 Prototype.js）也使用了 $，可以通过 jQuery.noConflict() 释放 $ 的控制权：
const jq = jQuery.noConflict(); // 避免冲突
jq("p").hide(); // 改用 jq 代替 $
- jQuery 与原生 JS 对比
| 操作 | jQuery 写法 | 原生 JS 等价写法 |
|---|---|---|
| 选择元素 | $("#box") | document.getElementById("box") |
| 文档就绪 | $(function() {}) | document.addEventListener("DOMContentLoaded", () => {}) |
| 修改样式 | $("p").css("color", "red") | document.querySelector("p").style.color = "red" |
| AJAX 请求 | $.ajax({url: "..."}) | fetch("...").then(res => res.json()) |
-
6.使用JQuery进行隐藏和显示
要使用Jquery需要导入一个第三方的javascript库 jquery.min.js
注意：script代码一定不要写到这行代码内部，一定要将jQuery库加载和自定义代码分开成两个
<script>标签
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
代码解释：
$(function(){
// 你的jQuery代码写在这里
});
这是 jQuery 的简写语法，等同于：
$(document).ready(function(){
// 你的jQuery代码写在这里
});
-
等待文档加载完成：这个代码块会等到 HTML 文档完全加载并解析完成（但不需要等待图片等外部资源完全加载）后才执行其中的代码。
-
防止获取未加载元素的问题：如果不把代码放在这里面，当你尝试操作一个尚未加载的DOM元素时（比如一个在页面底部的
<div>），jQuery会找不到这个元素，导致代码失效。
1.JQuery 常见方法
| 关键字 | 简介 |
|---|---|
| val | 取值 |
| html | 获取元素内容,如果有子元素，保留标签 |
| text | 获取元素内容,如果有子元素，不包含子元素标签 |
-
取值
通过JQuery对象的**val()**方法获取值
相当于 document.getElementById(“input1”).value;
注意，这里的取值只是曲属性value的值，如果没有则会得到undefind
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ alert($("#input1").val()); }); }); </script> <button id="b1">取值</button> <br> <br> <input type="text" id="input1" value="默认值"> -
获取元素内容,如果有子元素，保留标签
<script> $(function(){ $("#b1").click(function(){ alert($("#d1").html()); }); }); </script> -
获取元素内容,如果有子元素，不包含子元素标签
<script> $(function(){ $("#b1").click(function(){ alert($("#d1").text()); }); }); </script>
2.JQuery CSS
| 关键字 | 简介 |
|---|---|
| addClass | 增加class |
| removeClass | 删除class |
| toggleClass | 切换class |
| css | css函数 |
-
增加class
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d").addClass("pink"); }); }); </script> <button id="b1">增加背景色</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div id="d"> Hello JQuery </div> -
删除class
<script> $( function (){ $("#b1").click(function (){ $("#d").removeClass("pink"); }); }); </script> -
切换class
通过toggleClass() 切换一个样式中的class
这里的切换，指得是：如果存在就删除; 如果不存在，就添加<script> $( function(){ $("#b1").click(function(){ $("#d").toggleClass("pink"); }); }); </script> -
css函数
通过css函数 直接设置样式
css(property,value)
第一个参数是样式属性，第二个参数是样式值
css({p1:v1,p2:v2})
参数是 {} 包含的属性值对。
属性值对之间用 逗号，分割
属性值之间用 冒号 ：分割
属性和值都需要用引号 “
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d1").css("background-color","pink");
});
$("#b2").click(function(){
$("#d2").css({"background-color":"pink","color":"green"});
});
});
</script>
<button id="b1">设置单一样式</button>
<button id="b2">设置多种样式</button>
<br>
<br>
<div id="d1" >
单一样式，只设置背景色
</div>
<div id="d2" >
多种样式，不仅设置背景色，还设置字体颜色
</div>
3.JQuery 选择器
Jquery有多达数十种选择器，本章节把工作中会用到的常用选择器列出来，并逐一解释。
| 关键字 | 简介 |
|---|---|
| $(“tagName”) | 元素 |
| $(“id”) | id |
| $(“className”) | 类 |
| $(“selector1 selector2”) | 层级 |
| :first :last | 最先最后 |
| :odd :even | 奇偶 |
| :hidden :visible | 可见性 |
| [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] | 属性 |
| :input :button :radio :checkbox :text :file :submit :image :reset | 表单对象 |
| :enabled :disabled :checked :selected | 表单对象属性 |
| this | 当前元素 |
-
元素
$("div").addClass("pink"); -
id
$("#d1").addClass("pink"); -
类
$(".d").addClass("pink"); -
层级
$(“selector1 selector2”)
选择 selector1下的selector2元素 。
在本例中 选择id=d3的div下的span元素$("div#d3 span").addClass("pink"); -
最先最后
$(selector:first) 满足选择器条件的第一个元素
$(selector:last) 满足选择器条件的最后一个元素$("div:first").addClass("pink"); $(".d:last").addClass("pink"); -
奇偶
$(selector:odd) 满足选择器条件的奇数元素
$(selector:even) 满足选择器条件的偶数元素
因为是基零的，所以第一排的下标其实是0(是偶数)$("div:odd").toggleClass("pink"); $("div:even").toggleClass("green"); -
可见性
$(selector:hidden) 满足选择器条件的不可见的元素
$(selector:visible) 满足选择器条件的可见的元素
注； div:visible 和**div :visible(有空格)**是不同的意思
div:visible 表示选中可见的div
div :visible(有空格) 表示选中div下可见的元素<script src="jquery-3.5.1.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $(".d:visible").hide(); }); $("#b2").click(function(){ $(".d:hidden").show(); }); }); </script> <button id="b1">隐藏可见的</button> <button id="b2">显示不可见的</button> <br> <div class="d"> <span>Hello JQuery</span> </div> <div class="d" > <span>Hello JQuery</span> </div> <div id="d3" class="d" > <span>Hello JQuery</span> <p style="display: none">隐藏的段落</p> </div> -
属性
$(selector**[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
( s e l e c t o r ∗ ∗ [ a t t r i b u t e (selector**[attribute (selector∗∗[attribute=value]) 满足选择器条件的属性以value结尾的元素
$(selector**[attribute*=value]) 满足选择器条件的属性包含value**的元素注： 一般不要使用[class=className] 而应该使用.className
因为使用$(“[class=‘className’]”) .toggleClass(“anotherClassName”)
会导致class变成className anotherClassName,再次 使用 [class=className] 就无法选中了
而.className没有这个问题。<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div[id]").toggleClass("border"); }); $("#b2").click(function(){ $("div[id='pink']").toggleClass("border"); }); $("#b3").click(function(){ $("div[id!='pink']").toggleClass("border"); }); $("#b4").click(function(){ $("div[id^='p']").toggleClass("border"); }); $("#b5").click(function(){ $("div[id$='k']").toggleClass("border"); }); $("#b6").click(function(){ $("div[id*='ee']").toggleClass("border"); }); }); </script> <button id="b1">给有id属性的div切换边框</button> <button id="b2">给id=pink的div切换边框</button> <button id="b3">给有id!=pink属性的div切换边框</button> <button id="b4">给有id以p开头的div切换边框</button> <button id="b5">给有id以k结尾的div切换边框</button> <button id="b6">给有id包含ee的div切换边框</button> <br> <br> <style> .pink{ background-color:pink; } .green{ background-color:green; } .border{ border: 1px blue solid; } button{ margin-top:10px; display:block; } div{ margin:10px; } </style> <div id="pink"> id=pink的div </div> <div id="green"> id=green的div </div> <div > 没有id的div </div> -
表单对象
表单对象选择器 指的是选中form下会出现的输入元素
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮<script> $(function(){ $(".b").click(function(){ var value = $(this).val(); $("td[rowspan!=13] "+value).toggle(500); }); }); </script> <div > <button value=":input" class="b">切换所有的:input</button> <button value=":button" class="b">切换:button</button> <button value=":radio" class="b">切换:radio</button> <button value=":checkbox" class="b">切换:checkbox</button> <button value=":text" class="b">切换:text</button> <button value=":password" class="b">切换:password</button> <button value=":file" class="b">切换:file</button> <button value=":submit" class="b">切换:submit</button> <button value=":image" class="b">切换:image</button> <button value=":reset" class="b">切换:reset</button> </div> -
$(this)是什么？作用：指向当前被点击的按钮元素（即触发事件的
.b按钮）。-
具体值
：每次点击时，$(this)会动态绑定到：
- 点击
:input按钮 →$(this)是第一个按钮 - 点击
:checkbox按钮 →$(this)是第四个按钮
- 点击
-
.val()：获取按钮的value属性值（如":input"、":checkbox"）。
-
4.JQuery 筛选器
筛选器指的是在已经通过选择器选中了元素后，在此基础上进一步选择。
-
第一个 最后一个 第几个
首先通过 $(“div”) 选择了多个div元素，接下来做进一步的筛选first() 第1个元素
last() 最后一个元素
eq(num) 第num个元素
注: num基0<script> $(function(){ $("#b1").click(function(){ $("div").first().toggleClass("pink"); }); $("#b2").click(function(){ $("div").last().toggleClass("pink"); }); $("#b3").click(function(){ $("div").eq(4).toggleClass("pink"); }); }); -
父 祖先
parent() 选取最近的一个父元素
parents() 选取所有的祖先元素<script> $(function(){ $("#b1").click(function(){ $("#currentDiv").parent().toggleClass("b"); }); $("#b2").click(function(){ $("#currentDiv").parents().toggleClass("b"); }); }); -
儿子 后代
children(): 筛选出儿子元素 (紧挨着的子元素)
find(selector): 筛选出后代元素
注: find() 必须使用参数 selector<script> $(function(){ $("#b1").click(function(){ $("#currentDiv").children().toggleClass("b"); }); $("#b2").click(function(){ $("#currentDiv").find("div").toggleClass("b"); }); }); </script> <div id="currentDiv" > 当前元素 <div class="childrenDiv"> 儿子元素1 <div class="grandChildrenDiv">后代元素n</div> </div> <div class="childrenDiv"> 儿子元素2 <div class="grandChildrenDiv">后代元素n</div> </div> </div> -
同级
siblings(): 同级(同胞)元素
<script> $(function(){ $("#b1").click(function(){ $(".childrenDiv").siblings().toggleClass("b"); }); }); </script>
5.JQuery属性
| 关键字 | 简介 |
|---|---|
| attr | 获取 |
| attr(属性,值) | 修改 |
| removeAttr | 删除 |
| prop与attr | prop与attr的区别 |
-
获取
通过**attr()**获取一个元素的属性值
<script> $(function(){ $("#b1").click(function(){ alert("align属性是:" + $("#h").attr("align") ); }); $("#b2").click(function(){ alert("game属性是:" + $("#h").attr("game") ); }); }); </script> <button id="b1">获取align属性</button> <button id="b2">获取自定义属性 game</button> <br> <br> <h1 id="h" align="center" game="LOL">居中标题</h1> -
修改
通过attr(attr,value)修改属性
<script> $(function(){ $("#b1").click(function(){ $("#h").attr("align","right") ; }); }); -
删除
通过removeAttr(attr)删除属性
<script> $(function(){ $("#b1").click(function(){ $("#h").removeAttr("align"); }); }); </script> -
prop与attr的区别
与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性- 对于自定义属性 attr能够获取，prop不能获取
- 对于选中属性
attr 只能获取初始值， 无论是否变化
prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr<script> $(function(){ $("#b1").click(function(){ alert("game属性是:" + $("#c").attr("game") ); }); $("#b2").click(function(){ alert("game属性是:" + $("#c").prop("game") ); }); $("#b3").click(function(){ alert("checked属性是:" + $("#c").attr("checked") ); }); $("#b4").click(function(){ alert("checked属性是:" + $("#c").prop("checked") ); }); }); </script> <style> button{ display:block; } </style> <button id="b1">通过attr获取自定义属性 game</button> <button id="b2">通过prop获取自定义属性 game</button> <button id="b3">通过attr获取 checked属性</button> <button id="b4">通过prop获取 checked属性</button> <br> <br> <input type="checkbox" id="c" game="LOL" checked="checked"> 选中的复选框
6.JQuery 效果
| 关键字 | 简介 |
|---|---|
| show hide toggle | 显示 隐藏 切换 |
| slideUp slideDown slideToggle | 向上滑动 向下滑动 滑动切换 |
| fadeIn fadeOut fadeToggle fadeTo | 淡入 淡出 淡入淡出切换 指定淡入程度 |
| animate | 自定义动画效果 |
| callback | 回调函数 |
-
显示 隐藏 切换
显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000)<script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.hide(); }); $("#b2").click(function(){ div.show(); }); $("#b3").click(function(){ div.toggle(); }); $("#b4").click(function(){ div.show(1000); }); $("#b5").click(function(){ div.hide(1000); }); $("#b6").click(function(){ div.toggle(1000); }); }); </script> -
向上滑动 向下滑动 滑动切换
向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数，表示延时操作，比如slideUp(2000)<script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.slideUp(); }); $("#b2").click(function(){ div.slideDown(); }); $("#b3").click(function(){ div.slideToggle(); }); $("#b4").click(function(){ div.slideUp(2000); }); $("#b5").click(function(){ div.slideDown(2000); }); $("#b6").click(function(){ div.slideToggle(2000); }); }); </script> -
淡入 淡出 淡入淡出切换 指定淡入程度
淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入<script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.fadeIn(); }); $("#b2").click(function(){ div.fadeOut(); }); $("#b3").click(function(){ div.fadeToggle(); }); $("#b4").click(function(){ div.fadeIn(2000); }); $("#b5").click(function(){ div.fadeOut(2000); }); $("#b6").click(function(){ div.fadeToggle(2000); }); $("#b7").click(function(){ $("#d1").fadeTo("slow",0.2); $("#d2").fadeTo("slow",0.5); $("#d3").fadeTo("slow",0.8); }); }); </script> -
自定义动画效果
通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒
注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。<script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.animate({left:'100px'},2000); div.animate({left:'0px',top:'50px',height:'50px'},2000); }); }); </script> <style> button{ display:block; } div{ background-color:pink; width:200px; height:80px; font-size:12px; position:relative; } </style> -
回调函数
效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。<script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.animate({left:'100px'},2000); div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){ alert("动画演示结束"); }); }); }); </script>
7.JQuery 事件
| 关键字 | 简介 |
|---|---|
| $(document).ready() $() load() | 加载 |
| click() dblclick() | 点击 |
| focus() blur() | 焦点 |
| change() | 改变 |
| submit() | 提交 |
| on() | 绑定事件 |
| trigger() | 触发事件 |
-
加载
页面加载有两种方式表示
- $(document).ready();
- $(); 这种比较常用
图片加载用**load()**函数
<script> $(document).ready(function(){ $("#message1").html("页面加载成功"); }); $(function(){ $("#img").load(function(){ $("#message2").html("图片加载成功"); }); }); </script> -
点击
click() 表示单击
dblclick() 表示双击
注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件<script> $(function(){ $("#b").click(function(){ $("#message").html("单击按钮"); }); $("#b").dblclick(function(){ $("#message").html("双击按钮"); }); }); </script> -
焦点
focus() 获取焦点
blur() 失去焦点<script> $(function(){ $("input").focus(function(){ $(this).val("获取了焦点"); }); $("input").blur(function(){ $(this).val("失去了焦点"); }); }); </script> -
改变
change() 内容改变
注： 对于文本框，只有当该文本失去焦点的时候，才会触发change事件。<script> $(function(){ $("#input1").change(function(){ var text = $(this).val(); $("#message").html("input1的内容变为了"+text); }); }); </script> -
提交
submit() 提交form表单
<script> $(function(){ $("#form").submit(function(){ alert("提交账号密码"); }); }); </script> -
绑定事件
以上所有的事件处理，都可以通过on() 绑定事件来处理
$("selector").on("event",function);<script> $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); }); </script> -
触发事件
触发事件，在本例中，文档加载好之后，就触发dblclick双击事件，而不是通过去手动双击。
$("selector").trigger("event");<script> $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); $("#b").trigger("dblclick"); }); </script>
8.JQuery AJAX
| 关键字 | 简介 |
|---|---|
| $.ajax() | 提交AJAX请求 |
| $.get() | 使用get方式提交ajax |
| $.post | 使用post方式提交ajax |
| load() | 最简单的调用ajax的方式 |
| serialize() | 格式化form下的输入数据 |
-
提交AJAX请求
服务端使用JSP进行验证，当用户输入abc的时候提示"已经存在"
完整的 $.ajax 参数 比较复杂，这里采用了常见的调用方式。$.ajax({ url: page, data:{"name":value}, success: function(result){ $("#checkResult").html(result); } });$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数<span>输入账号:</span> <input id="name" name="name" type="text"> <span id="checkResult"></span> <script src="jquery-3.5.1.min.js"></script> <script> $( function(){ $("#name").keyup(function(){ var page = "checkName.jsp"; var value = $(this).val(); $.ajax( { url:page, data:{ "name":value}, success: function( result) { $("#checkResult").html(result); } }) }) }) </script> -
使用get方式提交ajax
$.get 是 $.ajax的简化版，专门用于发送GET请求
$.get( page, {"name":value}, function(result){ $("#checkResult").html(result); } );$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选<script> $( function(){ $("#name").keyup(function(){ var page = "checkName.jsp"; var value = $(this).val(); $.get( page, {"name":value}, function(result) { $("#checkResult").html(result); } ) }) }) </script> -
使用post方式提交ajax
$.post 是 $.ajax的简化版，专门用于发送POST请求
<script> $( function(){ $("#name").keyup(function(){ var page = "checkName.jsp"; var value = $(this).val(); $.post( page, {"name":value}, function(result) { $("#checkResult").html(result); } ) }) }) </script> -
最简单的调用ajax的方式
load比起 . g e t , .get, .get,.post就更简单了
$(“#id”).load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表<script> $( function(){ $("#name").keyup(function(){ var value = $(this).val(); var page = "checkName.jsp?name="+value; $("#checkResult").load(page); }) }) </script> -
格式化form下的输入数据
serialize()： 格式化form下的输入数据
有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串<a href="checkName.jsp">checkName.jsp</a> <form id="form"> 输入账号 :<input id="name" type="text" name="name"> <br> 输入年龄 :<input id="age" type="text" name="age"> <br> 输入手机号码 :<input id="mobile" type="text" name="mobile"> <br> <div id="checkResult"></div> </form> <script src="jquery-3.5.1.min.js"></script> <script> $(function(){ $("input").keyup(function(){ var data = $("#form").serialize(); var url = "checkName.jsp"; var link = url+"?"+ data; $("a").html(link); $("a").attr("href",link); var page = $('a').attr('href'); //console.log(page); $("#checkResult").load(page); }); }); </script><script> $(function(){ $("input").keyup(function(){ var data = $("#form").serialize(); var url = "checkName.jsp"; $.get( url, data, function(result) { $("#checkResult").html(result); }) }); }); </script>
9.JQuery 数组操作
| 关键字 | 简介 |
|---|---|
| $.each() | 遍历 |
| $.unique() | 去除重复 |
| $.inArray() | 是否存在$.inArray |
-
遍历
$.each 遍历一个数组
第一个参数是数组
第二个参数是回调函数 i是下标，n是内容<script> var a = new Array(1,2,3,4); $.each( a, function (i, n) { document.write("元素["+i+"]:"+n+"<br>"); }) document.close(); </script> -
去除重复
$.unique() 去掉重复的元素
注意 ： 执行unique之前，要先调用sort对数组的内容进行排序。
<script> function comparator(v1,v2){ return v2-v1; } var a = new Array(5,2,4,2,3,3,1,4,2,5); a.sort(comparator); $.unique(a); $.each( a, function (i, n) { document.write("元素["+i+"]:"+n+"<br>"); }) document.close(); </script> -
是否存在$.inArray
$.inArray 返回元素在数组中的位置 ，如果不存在返回-1
document.write($.inArray(9,a));
10.JQuery 字符串操作
| 关键字 | 简介 |
|---|---|
| $.trim() | 去除首尾空白 |
-
去除首尾空白
document.write($.trim(" Hello JQuery "));
11.JQuery JSON
| 关键字 | 简介 |
|---|---|
| $.parseJSON() | 将JSON格式的字符串，转换为JSON对象 |
-
将JSON格式的字符串，转换为JSON对象
<script> var s1 = "{\"name\":\"盖伦\""; var s2 = ",\"hp\":616}"; var s3 = s1+s2; document.write("这是一个JSON格式的字符串:" + s3); document.write("<br>"); var gareen = $.parseJSON(s3); document.write("这是一个JSON对象: " + gareen); </script>
12.JQuery 对象转换
| 关键字 | 简介 |
|---|---|
| get(0) [0] | JQuery转DOM |
| $() | DOM转JQuery |
-
JQuery转DOM
通过get(0)或者[0] 把JQuery对象转为DOM对象
<script>
$(function(){
$("#b1").click(function(){
var div= $("#d");
var d = div.get(0);
var s ="JQuery对象是 " + div;
s +="\n对应的DOM对象是 " + d
alert(s);
});
});
</script>
-
DOM转JQuery
通过$() 把DOM对象转为JQuery对象
<script> $(function(){ $("#b1").click(function(){ var div= document.getElementById("d"); var d = $(div); var s ="DOM对象是 " + div; s +="\n对应的JQuery对象是 " + d alert(s); }); }); </script>
扫一扫
1511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
