jQuery入门
一、jQuery是什么?
jQuery是轻量级的js库(压缩后只有21k) ,兼容各种浏览器。它是一个快速的,简洁的JavaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
其宗旨是:
WRITE LESS,DO MORE.
优势:其文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
二、jQuery的一个例子
如下代码中,一、二两处均为jQuery的主方法,其中二是一的简写。主方法在所有文件加载完毕后执行。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<!-- 引入JQuery库 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
/* 一:
$(document).ready(function() {//等待dom元素加载完毕,类似window.onload;
alert("helloworld");
})*/
// 二:
//主方法是所有文件加载完毕才执行的
$(function () {
alert("helloworld");
var uname = document.getElementById("username");
alert(uname);
})
</script>
</head>
<body>
用户名:<input id="username" type="text">
</body>
</html>
三、什么是jQuery对象?
jQuery 对象就是通过jQuery包装DOM对象后产生的对象,是 jQuery 独有的。如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 中的方法。
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法。
jQuery对象与DOM对象的转换方法:
$(function () {
//alert("helloworld");
var uname = document.getElementById("username");
alert(uname.value);
//将dom转换为jQuery对象
var unameJq = $(uname);
alert(unameJq.val());
//将jQuery对象转化成dom对象
var unameDom = unameJq[0];
alert(unameDom.value);
//第二种将jQuery对象转为dom对象的方法
var unameDom1 = unameJq.get(0);
alert(unameDom1.value);
})
四、jQuery选择器
在 jQuery 中,对事件处理、遍历 DOM 和 Ajax 操作都依赖于选择器,jQuery 选择器的写法更为简洁。
Id选择器
$("#id")
等价于document.getElementById(“id”);
元素选择器$("tagName")
等价于 document.getElementsByTagName(“tagName”);
1、ID选择器与元素选择器的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<!-- 引入JQuery库 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
/*$(document).ready(function() {//等待dom元素加载完毕,类似window.onload;
alert("helloworld");
})*/
//主方法是所有文件加载完毕才执行的
$(function () {
var unameJq = $("#username");
alert(unameJq.val());
//元素选择器,得到数组
var inputs = $("input");
//在遍历时,使用jQuery的方式
//若用for进行遍历用数组来取,则取到的是dom元素
inputs.each(function () {
alert($(this).val());
})
})
</script>
</head>
<body>
用户名:<input id="username" type="text" value="hola"><br>
密码: <input id="password" type="password" value="123456"><br>
验证码:<input id="cap" type="text" value="654321"><br>
<textarea>
我来自...
</textarea>
</body>
</html>
2、类选择器的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
//主方法是等着整个文档加载完毕才执行的
$(function () {
var divObj = $(".mydiv");
divObj.each(function () {
alert($(this).text()); //遍历每个内部对象的内容
})
})
</script>
<style>
.mydiv{
border: 1px solid blueviolet;
width: 100px;
height: 100px;
}
.mydiv1{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="mydiv">我是div1</div>
<div class="mydiv">我是div2</div>
<div class="mydiv1">我是div3</div>
</body>
</html>
3、层次选择器
如果想通过 DOM 元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器。
1 、ancestor descendant
用法: $(”form input”) ;
返回值 集合元素
说明: 在给定的祖先元素下匹配所有后代元素。
2、parent > child
用法: $(”form > input”) ;
返回值 集合元素
说明: 在给定的父元素下匹配所有子元素。
注意:要区分后代元素与子元素
3、prev + next
用法: $(”label + input”) ;
返回值 集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素
层次选择器例子:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
//主方法是等着整个文档加载完毕才执行的
$(function () {
//层级选择器,拿到所有子孙元素
var inputs1 = $("form input")
//只拿子元素
var inputs2 = $("form > input")
//匹配所有跟在label元素后面的input元素
var inputs3 = $("label + input")
inputs3.each(function () {
alert($(this).attr("name"))
})
})
</script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name">
<fieldset>
<label>Newsletter:</label>
<input name="newsletter">
</fieldset>
</form>
<input name="none">
</body>
</html>
4、基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素,该选择器都以 “:” 开头。按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。
1、:first
用法 : $(”tr:first”) ;
返回值:单个元素的组成的集合
说明:匹配找到的第一个元素
2、:last
用法: $(”tr:last”);
返回值 集合元素
说明: 匹配找到的最后一个元素。与 :first 相对应。
3、:not(selector)
用法: $(”input:not(:checked)”);
返回值 集合元素
说明: 去除所有与给定选择器匹配的元素。类似于”非”,意思是没有被选中的input(当input的type=”checkBox”)。
4、:even
用法: $(”tr:even”);
返回值 集合元素
说明: 匹配所有索引值为偶数的元素,从 0 开始计数,js的数组都是从0开始计数的。例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0。
5、: odd
用法: $(”tr:odd”);
返回值 集合元素
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数。
基本过滤选择器例子:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function myclick() {
$("input:checked").each(function () {
alert($(this).val());
})
$("input:not(:checked)").each(function () {
alert($(this).val());
})
}
</script>
</head>
<body>
<form>
<input type="checkBox" name="newsletter" checked="checked" value="basketball" />篮球
<input type="checkBox" name="newsletter" value="football" />足球
<input type="checkBox" name="newsletter" checked="checked" value="pingpang" />乒乓球
</form>
<a href="#" onclick="myclick()">点击</a>
</body>
</html>
5、属性过滤选择器
1、[attribute]
用法: $(”div[id]“) ;
返回值 集合元素
说明: 匹配包含给定属性的元素。例子中是选取了所有带”id”属性的div标签。
2、[attribute=value]
用法: $(”input[name=‘newsletter’]“).attr(”checked”, true);
返回值 集合元素
说明: 匹配给定的属性是某个特定值的元素。例子中选取了所有 name 属性是 newsletter 的 input 元素。
3、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name=‘man’]“)
返回值 集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用。例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素。
属性过滤选择器例子:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function myclick() {
$("input[type]").each(function () {
alert($(this).attr("name"));
})
$("input[type='password']").each(function () {
alert($(this).attr("name"));
})
$("input[type][name='mytext']").each(function () {
alert($(this).attr("name"));
})
}
</script>
</head>
<body>
<form>
<input type="text" name="mytext" />
<input type="password" name="mypassword"/>
<input type="radio" name="myradio"/>
<input name="mynotype"/>
</form>
<a href="#" onclick="myclick()">点击</a>
</body>
</html>
6、选择器综合练习
实现输出多选框的选中个数,全选、反选操作:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function myclick() {
alert($("input:checked").length);
}
function checkall() {
$("input[type='checkBox']").attr("checked","checked");
}
function revchk() {
$("input[type='checkBox']").each(function () {
var inputJq = $(this);
//获得checked这个属性的值
var status = inputJq.attr("checked");
if(status == "checked"){
inputJq.removeAttr("checked");
}else{
inputJq.attr("checked","checked");
}
})
}
</script>
</head>
<body>
<form>
<input type="checkBox" name="newsletter" checked="checked" value="basketball" />篮球<br>
<input type="checkBox" name="newsletter" value="football" />足球<br>
<input type="checkBox" name="newsletter" checked="checked" value="pingpang" />乒乓球<br>
</form>
<a href="#" onclick="myclick()">获得选中的个数</a>
<a href="#" onclick="checkall()">全选</a>
<a href="#" onclick="revchk()">反选</a>
</body>
</html>
五、jQuery中的DOM操作
append所做的工作是剪切,会把原有的元素转移过去。
1、append(content) :向每个匹配的元素的内部的结尾处追加内容
用法:$(’#a’).append(‘content’);
2、appendTo(content)
用法 : $(‘content’).appendTo($(’#a’))
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function myclick() {
var jqP = $("<p>亲爱的,不要跨过那条江</p>");
$("div").append(jqP);
}
</script>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<a href="#" onclick="myclick()">点击</a>
</body>
</html>
综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function moveRight() {
/*$("#select1 option").each(function () {
var status = $(this).attr("selected");
if(status == "selected"){
//append的元素是剪切
$("#select2").append($(this));
}
})*/
$("#select1 option:selected").appendTo($("#select2"));
}
function moveLeft() {
/*$("#select2 option").each(function () {
var status = $(this).attr("selected");
if(status == "selected"){
//append的元素是剪切
$("#select1").append($(this));
}
})*/
$("#select2 option:selected").appendTo($("#select1"));
}
function moveRightAll() {
$("#select1 option").appendTo($("#select2"));
}
function moveLeftAll() {
$("#select2 option").appendTo($("#select1"));
}
</script>
<style>
select{
width: 120px;
height: 150px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="select1" multiple="multiple">
<option>菜单管理</option>
<option>部门管理</option>
<option>员工管理</option>
<option>库存管理</option>
</select>
</td>
<td>
<input type="button" value=">" onclick="moveRight()"><br>
<input type="button" value=">>" onclick="moveRightAll()"><br>
<input type="button" value="<" onclick="moveLeft()"><br>
<input type="button" value="<<" onclick="moveLeftAll()"><br>
</td>
<td>
<select id="select2" multiple="multiple">
</select>
</td>
</tr>
</table>
</body>
</html>
外部插入节点
after(content)
:在每个匹配的元素之后插入内容
before(content)
:在每个匹配的元素之前插入内容
以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.
创建节点
创建节点: 使用 jQuery 的工厂函数 $(): $(html);
会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.
注意:
- 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
- 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个
<p>
元素, 可以使用$(“<p/>”)
或$(“<p></p>”)
, 但不能使用$(“<p>”)
或$(“</P>”)
。
创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
复制节点
clone()
: 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true)
: 复制元素的同时也复制元素中的的事件
例如:
<button>保存</button>
<p>段落</p>
$("button").click(function(){
alert("点击按钮");
});
//克隆节点,不克隆事件
$("button").clone().appendTo("p");
//克隆节点,克隆事件
$("button").clone(true).appendTo("p");
六、属性操作
jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), val(), css() 等.
removeAttr()
: 删除指定元素的指定属性
七、样式操作
获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr()
方法来完成.
追加样式: addClass()
移除样式: removeClass()
— 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass()
— 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass()
— 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
八、设置获取HTML,文本和值
读取和设置某个元素中的 HTML 内容: html()
. 该方法可以用于 XHTML, 但不能用于 XML 文档
读取和设置某个元素中的文本内容: text()
. 该方法既可以用于 XHTML 也可以用于 XML 文档.
读取和设置某个元素中的值: val()
— 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组
九、常用的遍历节点方法
取得匹配元素的所有子元素组成的集合: children()
. 该方法只考虑子元素而不考虑任何后代元素.
取得匹配元素后面紧邻的同辈元素的集合:next()
;
取得匹配元素前面紧邻的同辈元素的集合:prev()
<input type="button" value="查找所有子元素" id="b2"/>
<input type="button" value="获取后面的同辈元素" id="b3"/>
<input type="button" value="获取前面的同辈元素" id="b4"/>
十、事件
提供可以绑定的事件有:
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouSEOver, mouSEOut, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。