您的位置：首页 > Web前端 > JQuery

jQuery（一）

2016-06-04 18:54 344 查看

定义：对JavaScript对象和函数的封装，提高开发效率 http://jquery.com/ 开发版\发布版
作用：
1.访问和操作DOM元素
2.控制页面样式
3.对页面事件进行处理
4.与Ajax技术完美结合
5.扩展新的jQuery插件

优势：
1.出色的DOM封装
2.可靠的事件处理机制
3.出色的浏览器兼容性
4.强大的选择器
5.使用隐式迭代简化编程
6.体积小，丰富的插件支持

jQuery和JavaScript区别：
window.onload $(document).ready()
执行时机必须等页面所有的内容（包括图片，flash，视频等）加载完毕后才能执行网页所有DOM文档绘制完毕后即可执行，可能与DOM元素无关的内容（包括图片，flash，视频等）并没有加载完
编写个数同一个页面只能编写一个同一个页面同时编写多个
简化写法无 $(function(){//执行代码});

语法：
1.引入jQuery库文件
2.$(选择器).方法名();
<script>
$(document).ready(function() {
alert("Hello,jQuery！");
});
</script>

DOM元素的操作
a.js，获取的是DOM对象
var input = document.getElementById('userName');
alert(input.value);

b.jQuery，获取的是jQuery对象
var $input = $('#userName');
alert($input.val());
【注意：DOM对象和jQuery对象分别有一套独立的方法，不能混用！！！】

jQuery对象和DOM对象转换
1.数组方式
var $userName = $('#userName');
var userName = $userName[0];
2.get方法
var $userName = $('#userName');
var userName = &userName.get(0);
【★注意：jQuery对象本身是一个集合★】

范例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
</head>
<body>

<input id="userName" type="text" value="admin"></input>
<button  value="点击" onclick="getUserName()">点击</button>
<button id="btn" value="jQuery">jQuery</button>

<script type="text/javascript" src="bootstrap/bootstrap.js"></script>
<!-- jQuery包 -->
<script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script>
<script type="text/javascript">

/* 文档就绪事件 */
$(document).ready(function(){
alert('hello,jQuery');
});

//文档就绪的简化写法
$(function(){
alert('您好！');
});

/* jQuery获取jQuery对象 */
$(function(){

$('#btn').click(function () {
/* body... */
alert($('#userName').val());
});

});

/* 原始js获取DOM对象 */
function getUserName(){
//使用原始方法获取DOM对象
var inputDom = document.getElementById('userName').value;
alert(inputDom);
}
</script>
</body>
</html>

jQuery选择器
1.基本选择器：class、id
a.标签选择器：$('h2')
b.类选择器：$('.title')
c.ID选择器：$('#title')
d.并集选择器：$('div,p,.title')
e.交集选择器：$('h2.title')
f.全局选择器：$('*')
2.层次选择器：HTML布局结构
a.后代选择器：$('#menu h2') 选取#menu下的所有<h2>元素
b.子选择器：$('#menu>span') 选取#menu的子元素<span>
c.相邻元素选择器：$('h2+dl') 选取紧邻<h2>元素之后的同辈元素<dl>
d.同辈元素选择器：$('h2~dl') 选取<h2>元素之后所有的同辈元素<dl>
3.过滤选择器：指定的过滤规则
1)属性过滤选择器
a.$("[href]") 选取含有href属性的元素
b.$("[href ='#']") 选取href属性值为“#”的元素
c.$("[href !='#']") 选取href属性值不为“#”的元素
d.$("[href^='en']") 选取href属性值以en开头的元素
e.$("[href$='.jpg']") 选取href属性值以.jpg结尾的元素
f.$("li[id][title=新闻要点]") 选取含有id属性和title属性为新闻要点的<li>元素
2)基本过滤选择器
a.$("li:first") 选取所有<li>元素中的第一个<li>元素
b.$("li:last") 选取所有<li>元素中的最后一个<li>元素
c.$("li:even") 选取索引是偶数的所有<li>元素（index从0开始）
d.$("li:odd") 选取索引是奇数的所有<li>元素（index从0开始）
e.$("li:eq(1)") 选取索引等于1的<li>元素（index从0开始）
f.$("li:gt(1)") 选取索引大于1的<li>元素（注：大于1，不包括1）（index从0开始）
g.$("li:lt(1)") 选取索引小于1的<li>元素（注：小于1，不包括1）（index从0开始）
3)可见性过滤选择器
a.$(":visible") 选取所有可见的元素
b.$(":hidden") 选取所有隐藏的元素
4)表单过滤选择器
a.$( ":input") 选取所有的表单元素
b.$("[type=ckeckbox]:checked") 选取所有选中的复选框元素
c.$("select:selected") 匹配所有选中的下拉框
d.$( ":enabled") 匹配所有可用元素
e.$(":disabled") 匹配所有不可用元素

jQuery提供的方法
1.DOM元素的筛选
a.位置：eq(),first(),last(),next(),prev()
b.层次：chlidren()，parent()，siblings()，closest()
c.指定表达式：find()，hasClass()
2.属性操作
a.class属性：addClass()，removeClass()，toggleClass()
b.value属性：val()：获取或设置元素的值，一般用于表单元素
c.内容属性：html()，text()
3.样式
a.单样式操作：height()，width()
b.组合样式操作：css()
4.事件
a.事件绑定：$(选择器).事件名(); / $(选择器).on(事件类型,[选择器],[参数],方法);
b.事件移除：$(选择器).off(事件类型,[选择器],方法);
c.事件触发：$(选择器).trigger(事件类型,[参数]);
常用事件：ready，click，mouseover，mouseout，focus，blur，hover
5.操作
6.动画效果

范例：jQuery对象和DOM对象区别

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
</head>
<body>
<input id="userName" type="text" value="admin"></input>
<button  value="点击" onclick="getUserName()">点击</button>
<button id="btn" value="jQuery">jQuery</button>
<script type="text/javascript" src="bootstrap/bootstrap.js"></script>
<!-- jQuery包 -->
<script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script>
<script type="text/javascript">

/* 文档就绪事件 */
$(document).ready(function(){
alert('hello,jQuery');
});

//文档就绪的简化写法
$(function(){
alert('您好！');
});

/* jQuery获取jQuery对象 */
$(function(){
$('#btn').click(function () {
alert($('#userName').val());
});
});

/* 原始js获取DOM对象 */
function getUserName(){
//使用原始方法获取DOM对象
var inputDom = document.getElementById('userName').value;
alert(inputDom);
}

$(function(){
var inputDom = document.getElementById('userName').value;
console.log(inputDom);
var $inputJQ = $('#userName');
console.log($inputJQ);
});
</script>
</body>
</html>

范例：jQuery选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.step h1+ol{
background-color: red;
}
li[class]{
color:blue;
}
li[class=s]{
color: yellow;
}
input[data-role="save"]{
background-color: blue;
color: white;
border: none;
border-radius: 4px;
}
li:nth-child(1),li:nth-child(2){
font-size: 40px;
}
</style>
</head>
<body>
<script type="text/javascript" src="bootstrap/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script>
<div class="step">
<h1>把大象装进冰箱</h1>
<ol>
<li class="">打开冰箱</li>
<li class="s">把冰箱清空</li>
<li>把大象装进去</li>
<li>关上冰箱</li>
</ol>
<h1>把熊猫装进冰箱</h1>
<ol>
<li>打开冰箱</li>
<li>把冰箱清空</li>
<li>把熊猫装进去</li>
<li>关上冰箱</li>
</ol>
<input type="button" value="登录" data-role="save"></input>
</div>
<script type="text/javascript">
$(function(){
/* 获得所有的奇偶行 */
$('li:odd').css('background-color','blue');
$('li:odd').css({
'background-color':'blue',
'color':'red',
'font-size':'20px'
});

/* 找到第一个ol下面的第三个li */
$('ol li:eq(2)').css('border','10px solid red');

/* 找到所有ol下面的第三个li */
$('ol').find('li:eq(2)').css('border','10px solid red');
});
</script>
</body>
</html>

范例：事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.news li.selected{
background-color: red;
color: white;
}
</style>
</head>
<body>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script>

<button id="btn_add" value="添加">添加</button>
<h3>新闻列表</h3>
<ol class="news">
<li><a href="javascript:;"></a>国内新闻</li>
<li>国际新闻</li>
<li>体育新闻</li>
<li>新闻列表</li>
</ol>

<script type="text/javascript">
$(function(){
$('#btn_add').click(function () {
var  $li = $('<li></li>');
$li.text('新添加');
$('ol').append($li);
});

$('.news li').click(function () {
// $(this).toggleClass('selected');
// $(this).addClass('selected').siblings().removeClass('selected');
$(this).toggleClass('selected').siblings().removeClass('selected');
$(this).css('font-size','20px');
alert($(document).height());
});

$('.news').on('click','li',function(){
$(this).toggleClass('selected').siblings().removeClass('selected');
/* 事件触发一次，就关闭 */
// $('.news').off('click');

/* 点击li，就触发添加按钮 */
$('#btn_add').trigger('click');
});
});
</script>
</body>
</html>

范例：jQuery操作表格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>电话</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>刘七</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
</tbody>
</table>
<div>详细信息</div>
</div>

<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>电话</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>刘七</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
</tbody>
</table>
<div>详细信息</div>
</div>

<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>电话</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
<tr>
<td>刘七</td>
<td>男</td>
<td>1999-11-11</td>
<td>13612345672</td>
<td>zhangsan@qq.com</td>
<td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td>
</tr>
</tbody>
</table>
<div>详细信息</div>
</div>

<script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
$('a[data-role="del"]').click(function(){
/* (a)td->tr->td:first */
// var name = $(this).parent().parent().find('td:first').text();
var name = $(this).closest('tr').children().first().text();
confirm(name + '?');
});

$('a[data-role="detial"]').click(function(){
var name = $(this).closest('tr').find('td:eq(0)').text();
var $detialLayer = $(this).closest('table').next();
$detialLayer.html(name);
// confirm('查看' + name);
});
});
</script>
</body>
</html>

范例：下拉表单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/select2-4.0.2-dist/css/select2.min.css">
</head>
<body>
<select style="width: 200px;">
<option>1</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>21</option>
<option>31</option>
<option>41</option>
<option>61</option>
</select>

<script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script>
<script type="text/javascript" src="bootstrap/select2-4.0.2-dist/js/select2.full.min.js"></script>
<script type="text/javascript">
$(function () {
$('select').select2();
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航