jquery 基本内容

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天开始学习Jqury。

1.JavaScript类库

* 简称为JS库

* 目的 - 就是为了简化JavaScript的开发工作

* 作用 - 封装了很多的对象和函数

* 特点 - 帮助开发人员建立有高难度交互的Web 2.0特性的富客户端，并且兼容各大浏览器

* 主流的JS库

* jQuery

* Prototype

* YUI - Yahoo User Interface

* Extjs

* Dojo

* jQuery

* 基本内容

* 分类

* jQuery - 针对PC端Web开发

* jQuery UI - 集成式UI解决方案

* jQuery Mobile - 针对移动端Web开发

* QUnit - 专门用于前端代码测试

* 使用jQuery的步骤

* 在HTML页面引入jQuery文件

* 在HTML页面定义元素

* 在JavaScript代码中

* 通过jQuery的工厂函数使用选择器定位元素

* 使用jQuery提供的API方法完成需求

* 基本内容

* 工厂函数 - $()或jQuery()

* 作用 - 作为选择器的载体,定位页面元素

* 返回值 - jQuery对象

* jQuery的官方约定

* $符号代表jQuery

* 建议 - 通过jQuery获取的变量名,增加"$"

例如:如何使用jQuery

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何使用jQuery</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="text" id="uname" value="请输入用户名">
<script>
// 需求 - 获取id为username元素,并且打印value属性值
// DOM对象
var input= document.getElementById("uname");
console.log("这是DOM对象的:"+input.value);
// jQuery对象
var $input = $("#uname");
console.log("这是jQuety对象的:"+$input.val());
</script>
</body>
</html>

复制代码

效果如下:

2.jQuery对象

* DOM对象 - 通过DOM所获取的HTML元素,称之为DOM对象

* jQuery对象 - 是通过包装DOM对象后所产生的对象

* jQuery对象的底层还是DOM对象

* DOM对象与jQuery对象相互转换

* DOM对象转换为jQuery对象

* $(DOM对象)

例如:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象与jQuery对象的转换</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="text" id="uname" value="请输入用户名">
<script>
//DOM对象
var input= document.getElementById("uname");
// DOM对象转换为jQuery对象
var $input1 = $(input);
console.log("DOM对象转换为jQuery对象:"+$input1.val());
</script>
</body>
</html>

复制代码

效果如下:

* jQuery对象转换为DOM对象

* jQuery对象是类数组对象 - jQuery对象[索引值

* jQuery提供get(index)方法

例如:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象与jQuery对象的转换</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="text" id="uname" value="请输入用户名">
<script>
// jQuery
var $input = $("#uname");
// jQuery对象转换为DOM对象
// 1. jQuery对象是类数组对象(Arguments对象)
var input1 = $input[0];
console.log("jQuery对象转DOM方法一:"+input1.value);
// 2. jQuery提供get(index)方法
var input2 = $input.get(0);
console.log("jQuery对象转DOM方法二:"+input2.value);
</script>
</body>
</html>效果如下:
* 注意 * DOM对象与jQuery对象之间不能相互调用对方的属性或方法 jQuery小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15_实现多页签切换效果</title>
<script src="jquery-1.11.3.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#tab li {
float: left;
list-style: none;
width: 80px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
}
#container {
position: relative;
}
#content1, #content2, #content3 {
width: 300px;
height: 100px;
padding: 30px;
position: absolute;
top: 40px;
left: 0;
}
#tab1, #content1 {
background-color: #ffcc00;
}
#tab2, #content2 {
background-color: #ff00cc;
}
#tab3, #content3 {
background-color: #00ccff;
}
.foreground {
z-index: 1;
}
</style>
</head>
<body>
<h2>实现多标签页效果</h2>
<ul id="tab">
<li id="tab1" value="1">20元套餐</li>
<li id="tab2" value="2">30元套餐</li>
<li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
<div id="content1" style="z-index: 1;">
20元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟
</div>
<div id="content2">
30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
</div>
<div id="content3">
50元包月详情：<br /> 每月无限量随心打,另外还送1G流量
</div>
</div>
<script>
// 1. 为所有的li元素绑定click事件
$("#tab>li").click(function(){
// 2. 事件的处理函数
$("#content"+this.value).attr("style","z-index:1").siblings("div").removeAttr("style");
});
</script>
</body>
</html>