JQuery基础知识梳理篇
这周没事，优化线上项目，因为前端都在赶项目，我又若菜。于是前端数据展示也要自己来。看javascript看到吐，决定梳理一下Jquery基础知识。敲黑板) 闲扯结束，进入正题。
选择器
介绍
- jquery可以通过元素选择器和属性选择器通过签名，属性名或者内容对html元素进行选择
元素选择器
- 使用css选择器来选取html元素
$("p") //选取元素
$("p.intro") //选取所有class=intro的元素
$("p#demo") //选取所有id=demo的元素
属性选择器
- 使用xPath表达式来选择带有给定属性的元素
$("[href]") //选取所有带有href属性的元素
$("[href='#']") //选取所有带有href属性等于"#"的元素
$("[href!='#']") //选取所有带有href属性不等于"#"的元素
$("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素。
css选择器
- css选择器可用于改变html元素的css属性
$("p").css("background-color", "red"); //把所有的p元素的背景颜色改为红色
其他选择器
$(this) //当前html元素
$(".intro") //所有class="intro"的元素
$("#intro") //所有id="intro"的元素
$("ui li:first") //每个<ul>的第一个<li>元素
$("div#intro .head") //id="intro"的<div>元素中的所有class="head"的元素
事件
介绍
-
为事件处理特别设计的，jquery事件处理方法是jquery中的核心函数
-
事件处理器指的是当html中发生某些事件时所调用的方法
语法
- $("button").click(function() {..some code... } )
- 为了jquery函数易于维护，可以把jquery函数放到独立的xxx.js文件中
引用:
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
JQuery事件
- $(document).ready (function) //文档完成加载后，触发事件
- $(selector).click (function) //触发或者将函数绑定到被选元素的点击事件
- $(selector).dblclick (function) //触发或者将函数绑定到被选元素的双击事件
- $(selector).mouseover (function) //触发或者将函数绑定到被选元素的鼠标悬停事件
HTML
获取，设置
-
$(选择器).text(设置值可选) -- 设置或者返回所选元素的文本内容
-
$(选择器).html(设置值可选) -- 设置或者返回所选元素的内容(包括HTML标记)
-
$(选择器).val(设置值可选) -- 设置或返回表单字段的值
-
$(选择器).attr() -- 获取属性值
没有设置值为获取选择器内容, 有设置值为获取选择器内容
创建元素
// 创建Text. 字符串
var txt = "<p>Text.</p>"; // html创建新元素
var txt = $("<p></p>").text("Text."); //jQuery创建新元素
var txt = document。createElement("p"); //DOM创建新元素
添加
- $(选择器).append(添加内容) -- 在选择器结尾(标签内部)插入内容 可添加多个
- $(选择器).prepend(添加内容) -- 在选择器开头(标签内部)插入内容 可添加多个
- $(选择器).after(添加内容) -- 在被选元素之后(标签外部)插入内容 可添加多个
- $(选择器).before(添加内容) -- 在被选元素之前(标签外部)插入内容 可添加多个
删除元素
- remove() - 删除被选元素(包括子元素)
实例:
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>删除 div 元素</button>
</body>
<!--点击按钮，触发时间，删除指定的div及其子元素-->
hint: remove()方法可以接受一个参数，允许你对被删除元素进行过滤
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有 p 元素</button>
</body>
<!--删除例子中class="italic"的所有<p>元素 -->
- empty() - 删除被选中元素的子元素
实例:
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>清空 div 元素</button>
</body>
点击按钮，清空指定div中的字体内容，但是div模块依然存在
JQuery 遍历
遍历(移动):
- 用于根据相对其他元素的关系来查找html元素, 以摸一个选择开始，并沿着这个选择移动，知道抵达期望的元素为止。
- 例子: 如在一个家族树上，通过jQuery遍历，你可以从当前元素，向上，向下，水平移动，从而到达期望的位置，又称DOM遍历。
祖先
- parent(): 返回被选元素的直接父元素
$("span").parent(); //返回元素的直接祖先 - parents(): 返回被选中元素的所有祖先元素
$("span").parents(); //返回元素的所有祖先 - parentsUntil(): 返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div"); //返回span的祖先 并且 是div的儿子的元素
后代
- children(): 返回被选元素的所有直接子元素
$("div").children(); //返回标签的所有直接子元素
$("div").children("p.1"); //对标签的所有直接子元素进行过滤，返回类名为1的元素
- find(): 返回被选中元素的所有后代元素，直到最后一个后代
$("div").find("span"); //返回后代的所有元素
$("div").find("*"); //返回元素的所有后代
同胞
-
siblings(): 返回被选中元素的所有同胞元素
$("h2").siblings(); //返回的所有同胞元素
$("h2").siblings("p"); //返回同胞元素中的所有
元素(过滤)
-
next(): 返回被选中元素的下一个同胞元素
$("h2").next(); //返回的下一个同胞(右兄弟)
-
nextAll(): 返回被选元素所有跟随的同胞元素
$("h2").nextAll(); //递归返回的所有下一个同胞(右兄弟)
-
nextUntil(): 返回介于两个参数之间的所有跟随同胞元素
$("h2").nextUntil("h6"); //返回与
之间的所有的同胞元素
-
prev(), preAll(), prevUntil()方法与nextXXX相反，相对应取指定元素的左兄弟
过滤
-
first(): 返回被选中元素的首个元素
$("div p").first(); //返回首个元素内部的第一个元素
-
last(): 返回被选元素的最后一个元素
$("div p").last(); //返回最后一个元素内部的最后一个元素
-
eq(): 返回被选元素中带有指定引索号的元素(引索号从0开始)
$("p").eq(1); //选取第二个元素
-
filter(): 返回符合指定匹配标准的元素
$("p").filter(".intro"); //返回带有类名intro的所有元素
-
not(): 返回不匹配标准的所有元素
$("p").not(".intro"); //返回不带有类名的所有元素
AJAX:
定义
与服务器交换数据的艺术，在不重载页面的情况下实现对部分网页的更新 (异步JavaScript + XML)
通过jQuery AJAX方法， 可以实现http get/post从远程服务器上请求文本，html，xml，json。同时把这些外部数据直接载入网页的被选中元素中
jQuery - Ajax方法
jQuery load()
- 从服务器加载数据，并把返回的数据放入被选中的元素中
- 语法: $(selector).load(URL(需要加载的url), data(请求的信息), callback(返回执行的函数名));
- callback参数设置: responseTxt -- 包含调用成功时的结果内容，statusTXT -- 调用状态， xhr -- 包含XMLHttpRequest对象
- 范例:
demo_test.txt:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>
点击button后，会获取demo_test内容，替换原来test文本
get()
- get() - 从指定的资源请求数据
- 语法: $get (URL, callback);
- 范例:
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/example/jquery/demo_test.asp",function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>
</body>
向/example/jquery/demo_test.asp请求数据，回调函数返回数据以及状态
post()
- post() - 向指定的资源提交要处理的数据
- 语法: $.post(URL, data, callback); (请求链接，提交数据，请求成功后所返回的函数名)
- 范例:
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/example/jquery/demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP POST 请求，并获得返回的结果</button>
</body>
向链接/example/jquery/demo_test_post.asp发送(name,city)内容，回调函数参数求情页面内容，请求状态。
