Jquery
使用步骤:
1. 去下载jquery.js文件
2. 在html中 通过script标签的src属性引入jquery.js文件
3. 就可以在后续的代码中, 调用jquery中封装的函数了.
小技巧:
绝大多数人的浏览器, 都打开过百度 , 百度使用了jquery
含义: 很多人的浏览器中, 其实已经缓存了一份jquery文件了. 我们引入百度的jquery文件会更快响应.
onload *
格式:
$(function(){
//当网页加载
});
Jquery 对象
简介:
Jquery对象是Jquery提供的 用于封装dom对象的容器.
可以简单的理解为: jquery对象就是dom对象的集合.
DOM对象 与 Jquery对象的转换
格式:
- DOM对象 转换为 Jquery对象:
var $Jquery对象 = $(dom对象);
- Jquery对象 转换为 DOM对象
var dom对象 = $jquery对象.get(下标);
选择器 ***
我们可以通过CSS的选择器 , 来完成Jquery对象的查找.
格式:
var jquery对象 = $("选择器");
基本选择器 *****
ID选择器
var $obj = $("#id值");
- 类选择器
var $obj = $(".class值");
- 元素名称选择器
var $obj = $("元素名称");
案例:
<script type="text/javascript">
$(function(){
var $img = $("img");
$img.hide(3000);
});
</script>
</head>
<body>
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
筛选 选择器
基本筛选选择器
**格式:**
- $("选择器:first") : 筛选匹配的第一个元素
- $("选择器:last") : 筛选匹配的最后一个元素
- $("选择器:eq(下标)") : 筛选匹配的 指定下标 元素
- $("选择器:gt(下标)") : 筛选大于 指定下标 元素
- $("选择器:lt(下标)") : 筛选小于 指定下标 元素
- $("选择器:even"); : 筛选匹配的 偶数下标元素
- $("选择器:odd"); : 筛选匹配的 奇数下标元素
案例:
<script type="text/javascript">
$(function(){
$("div:first").css({"font-size":"10px"});
$("div:last").css({"font-size":"10px"});
$("div:eq(3)").css({"color":"#0f0"});
$("div:gt(3)").css({"color":"#f00"});
$("div:lt(3)").css({"color":"#00f"});
$("div:even").hide(1000);
$("div:odd").css({"border":"3px solid #999"});
});
</script>
</head>
<body>
<div> 日照香炉生紫烟 </div>
<div> 锄禾日当午 </div>
<div> 床前明月光 </div>
<div> 去年今日此门中 </div>
<div> 我是DJ喜洋洋 , 青青草原我最狂 </div>
<div> 唧唧复唧唧 , 木兰开飞机 ~ </div>
<div> 过了星期三, 就是星期天.. </div>
<div> 集体性活动 </div>
<div> 研究性学习 </div>
<div> 大学生活真好 </div>
<div> 危险性动作 , 切勿模仿 </div>
高级筛选选择器 了解
高级筛选选择器 - 排除 了解****
格式:
var $obj = $("选择器1:not(选择器2)");
作用:
从选择器1的结果中, 排除掉选择器2的结果
案例:
<script type="text/javascript">
$(function(){
$("div:not(.c1)").hide(1000);
});
</script>
</head>
<body>
<div> 日照香炉生紫烟 </div>
<div> 锄禾日当午 </div>
<div class="c1"> 床前明月光 </div>
<div> 去年今日此门中 </div>
<div class="c1"> 我是DJ喜洋洋 , 青青草原我最狂 </div>
<div class="c1"> 唧唧复唧唧 , 木兰开飞机 ~ </div>
<div class="c1"> 过了星期三, 就是星期天.. </div>
<div class="c1"> 集体性活动 </div>
<div> 研究性学习 </div>
<div> 大学生活真好 </div>
<div> 危险性动作 , 切勿模仿 </div>
高级筛选选择器 - 内容 了解
筛选元素内容 是否 包含
格式:
var $obj = $("选择器:contains('包含的文本')");
例如:
筛选所有包含日的文字
var $obj = $("div:contains('日')");
- 筛选元素内容 是否为空
格式:
var $obj = $("选择器:empty");
案例:
<script type="text/javascript">
$(function(){
//var $obj = $("div:contains('日')");
//$obj.css({"box-shadow":"3px 3px 3px 3px #999"});
//$("div:contains('日')").css({"box-shadow":"3px 3px 3px 3px #999"});
$("div:empty").css({"border-bottom":"2px solid #666"});
});
</script>
高级筛选选择器 - 可见性 了解
筛选可见的元素:
格式:
var $obj = $("选择器:visible");
筛选不可见的元素:
格式:
var $obj = $("选择器:hidden");
什么是 不可见的元素
1. 宽度或高度为0
2. display:none
3. input标签 type=hidden
案例:
<script type="text/javascript">
function x1(){
change();
}
function x2(){
change();
var val = $("input").get(0).value;
$("span").get(0).innerHTML = val;
}
function change(){
var $div1 = $("div:visible");
var $div2 = $("div:hidden");
$div1.hide();
$div2.show();
}
</script>
</head>
<body>
<div ondblclick="x1()">
<span class="nickname nn">短小经干小泽马</span>
</div>
<div style="display:none">
<!-- onblur:当输入框的输入状态消失 -->
<input onblur="x2()" class="nickname" value="短小经干小泽马">
</div>
</body>
常用函数: 显示隐藏函数
显示: show(毫秒);
隐藏: hide(毫秒);
常用函数: css函数
格式:
$obj.css({"":"","":""});
案例:
更改#div1元素的 文字大小24px 文字颜色#0f0 , 文字居中text-align:center;
var $div1 = $("#div1");
$div1.css({
"font-size":"24px",
"color":"#0f0",
"text-align":"center"
});
表单筛选选择器 掌握
格式:
var $obj = $("选择器:type属性值");
作用:
用于筛选表单中的input标签 ,根据type属性值 来筛选
例如:
获取所有的单选框:
$("input:radio")
获取class值为input_text的 所有文本输入框:
$(".input_text:text");
案例:
<script type="text/javascript">
$(function(){
$("input:text").css({"font-size":"18px"});
$("input:password").css({"font-size":"18px","color":"#0f0"});
});
</script>
</head>
<body>
<input type="text" placeholder="请输入帐号">
<input type="password" placeholder="请输入密码">
修改与获取元素的属性值
回顾JS的操作:
dom对象.属性名 = "属性值";
- 在Jquery中, 通过一个函数, 来操作属性 : attr函数
格式:
设置属性:
设置一个属性的值: $obj.attr("属性名","属性值");
设置一组属性的值: $obj.attr({"属性名1":"属性值1","属性名2":"属性值2"...});
获取属性: var 属性值 = $obj.attr("属性名");
案例:
<script type="text/javascript">
// 图片地址的数组
var images = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
// 用于记录当前展示的图片的下标
var index = 0;
// 当点击上一张时 , i为-1 , 当点击下一张时 i为 1
function x1(i){
index+=i;
if(index == -1){
//左 越界 , 设置为 最大下标
index = images.length-1;
}else if(index == images.length){
//右 越界 , 设置为 最小下标
index= 0;
}
//找到img元素, 设置它的src属性值为 images[index]
$("img").attr("src",images[index]);
}
</script>
</head>
<body>
<div>
<img src="images/1.jpg">
<div><button onclick="x1(-1)">上一张</button><button onclick="x1(1)">下一张</button></div>
<div>
<div class="item" onmouseover="index=0;x1(0)">1</div>
<div class="item" onmouseover="index=1;x1(0)">2</div>
<div class="item" onmouseover="index=2;x1(0)">3</div>
<div class="item" onmouseover="index=3;x1(0)">4</div>
<div class="item" onmouseover="index=4;x1(0)">5</div>
</div>
</div>
</body>
特殊属性: 标签内容
回顾JS:
dom对象.innerHTML 来操作元素的标签内容.
在Jquery中, 通过两个函数来控制标签内容:
1. html函数 :
设置内容: $obj.html("标签内容");
获取内容: var 标签内容 = $obj.html();
2. text函数 :
设置内容: $obj.text("标签内容");
获取内容: var 标签内容 = $obj.text();
html与text的区别: ***
html函数 操作标签内容时, 可以得到标签部分 .
text函数 操作标签内容时, 会忽略标签部分
例如:
<div id="div1"><span>从前</span><div>有座山</div></div>
html获取 #div1的标签内容 : <span>从前</span><div>有座山</div>
text获取 #div1的标签内容 : 从前有座山
特殊属性: class值
添加一个class
$obj.addClass("值");
- 移除一个class
$obj.removeClass("值");
- 替换一个class (存在则删除, 不存在则添加)
$obj.toggleClass("值");
案例:
样式:
<style type="text/css">
.a{
background-color: #333;
color:#999;
padding:20px;
}
.b{
background-color: #eee;
color:#090;
padding:20px;
}
#btn{
position: fixed;
right:-40px;
top:100px;
transition:2s;
cursor: pointer;
}
#btn:hover{
right:10px;
}
</style>
<script type="text/javascript">
function change(){
var title = $("#btn").attr("title");
if(title=="关灯"){
//1. 换图 b.png
$("#btn").attr("src","images/b.png");
//2. 换提示的title 开灯
$("#btn").attr("title","开灯");
//3. 切换 div的class a
$("#div1").removeClass("b");
$("#div1").addClass("a");
}else{
//1. 换图 a.png
$("#btn").attr("src","images/a.png");
//2. 换提示的title 关灯
$("#btn").attr("title","关灯");
//3. 切换 div的class b
$("#div1").removeClass("a");
$("#div1").addClass("b");
}
}
</script>
<body>
<img onclick="change()" id="btn" title="关灯" src="images/a.png">
<div id="div1" class="b">此处忽略了一本小说</div>
特殊属性: value值
回顾JS:
dom对象.value
Jquery中:
因为jquery在用户操作网页之前 就已经创建了所有元素的Jquery对象,
导致我们在使用jquery的attr函数获取value属性值时, 一直得到的都是用户操作之前的.
jquery为我们提供了一个新的操作value属性值的函数:
- 获取属性值
var val = $obj.val();
- 设置属性值
$obj.val("值");
样式函数 *
格式1.
$obj.css(对象);
格式2.
$obj.css("样式的键","样式的值");
案例:
$("div").css("color","#f0c");
宽高函数 了解
设置宽度: $obj.width(数字);
设置高度: $obj.height(数字);
获取宽度: $obj.width();
获取高度: $obj.height();
案例:
function x1(){
var width = $("img").width();
$("img").width(width*1.1);
}
</script>
</head>
<body>
<img src="images2/4.jpg" onclick="x1()">
显示与隐藏函数 *
基本显示隐藏函数:
- 显示: $obj.show();
- 隐藏: $obj.hide();
- 切换: $obj.toggle();
左上折叠淡入淡出 函数
- 显示: $obj.show(毫秒);
- 隐藏: $obj.hide(毫秒);
- 切换: $obj.toggle(毫秒);
上下折叠显示隐藏函数
**注意: 如果应用到图片上, 需要 指定固定的宽度.**
- 显示: $obj.slideDown(毫秒);
- 隐藏: $obj.slideUp(毫秒);
- 切换: $obj.slideToggle(毫秒);
淡入淡出显示隐藏函数
- 淡入: $obj.fadeIn(毫秒);
- 淡出: $obj.fadeOut(毫秒);
动画函数
格式:
$obj.animate(style,time,[function(){}]);
参数1. 动画执行的 目标样式. 是一个对象, 使用JSON描述即可
参数2. 元素从当前样式 到 目标样式 所需的毫秒时间
参数3. 函数, 当动画执行完毕 执行.
案例:
<style type="text/css">
#x{
position: absolute;
top:150px;
left:-330px;
font-size:32px;
}
span{
display: inline-block;
transition:transform 1s;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#x").animate({"left":"500px"},1000,x1);
});
//要旋转的字
var index1 = 0;//1 2
//要还原的字
var index2 = 7;//0 1
function x1(){
//alert("动画执行完毕了");
//span:eq(0)
$("span:eq("+index1+")").css("transform","rotate(720deg)");
$("span:eq("+index2+")").css("transform","rotate(0deg)");
$("span:eq("+index1+")").animate({"font-size":"80px"},1000);
$("span:eq("+index2+")").animate({"font-size":"32px"},1000,x1);
index2 = index1;
index1++;
if(index1 == 8){
index1 = 0;
}
}
</script>
</head>
<body>
<div id="x">
<span>国</span>
<span>安</span>
<span>老</span>
<span>师</span>
<span>挺</span>
<span>会</span>
<span>玩</span>
<span>~</span>
</div>
函数进行传递时:
传递函数名称 : 传递的是function类型的对象, 也就是函数本身/
传递函数() : 传递的是 函数的执行结果 也就是返回值.
Jquery 事件
Jquery事件可以很好的 使HTML标签与逻辑代码进行分离. 更便于我们后期的扩展与维护工作.
事件的绑定与解绑
格式:
- 绑定事件
- $obj.bind("事件类型",执行的函数);
- 解绑事件
- $obj.unbind("事件类型");
- 模拟触发事件
- $obj.trigger("事件类型");
案例:
倒计时案例
<script type="text/javascript">
function x1(){
$("button").css({"color":"#aaa"});
$("button").unbind("click");
//启动周期性定时器
var s = 10;
var i = setInterval(function(){
$("button").html(s+"s");
//倒计时完毕了
if(s==0){
//1. 将周期性定时器关闭
clearInterval(i);
//2. 将按钮的文字 与 颜色恢复
$("button").css("color","#000");
$("button").html("获取验证码");
//3. 绑定点击事件
$("button").bind("click",x1);
}
s--;
},1000);
}// <input placeholder="请输入手机号码"><button>获取验证码</button>
$(function(){
$("button").bind("click",x1);
});
</script>
</head>
<body>
<input placeholder="请输入手机号码"><button>获取验证码</button>
</body>
模拟京东商品数量增加:
for(i=1;i<100;i++){
$(".btn-add").trigger("click");
}
事件函数 *
格式:
$obj.事件类型(function(){
});
例如给按钮#but1 添加点击事件:
$("#but1").click(function(){});
案例:
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
alert("按钮被点击");
});
$("input").blur(function(){
var text = $("input").val();
alert(text);
});
});
</script>
</head>
<body>
<button id="btn1">示例按钮</button>
<input>
</body>
组合事件函数 *
作用: 用于鼠标移入移出的事件处理 ;
- hover(移入func,移出func)
参数1. 鼠标移入时触发的函数
参数2. 鼠标移出时触发的函数
**文档函数 ***
1. 创建新元素
格式: var $obj = $("html元素字符串");
例如:创建一个按钮:
var $btn = $("<button>按钮</button>");
2. 添加元素
- 向某元素的内部, 追加子元素
格式: $obj.append(新元素);
- 向某元素的内部, 前置子元素
格式: $obj.prepend(新元素);
- 向某元素的后面, 添加兄弟元素
格式: $obj.after(新元素);
- 向某元素的前面, 添加兄弟元素
格式: $obj.before(新元素);
3. 删除元素
格式:
$要删除的元素 .remove();
4. 清空元素
格式:
$要清空的元素.empty();
5. 克隆元素
文档查找函数 ***
根据一个已存在的Jquery对象, 查找相关的Jquery对象.
- 查找子元素
$obj.children("选择器");
- 查找后代元素
$obj.find("选择器");
- 得到下一个兄弟元素
$obj.next();
- 得到上一个兄弟元素
$obj.prev();
- 得到父元素
$obj.parent();
- 查找祖先元素
$obj.parents("选择器");
插件开发
二维码生成 熟悉
步骤:
1. 引入jquery.js
<script src="js/jquery.js"></script>
2. 引入插件的utf中文支持.js
<script src="js/utf.js"></script>
3. 引入jquery.qrcode.js
<script src="js/jquery.qrcode.js"></script>
4. 在网页中, 编写一个div标签 , 这个div标签就是用于展示二维码的 ,建议给div添加id属性值
<div id="code"></div>
5. 在JS代码块中, 通过jquery, 查找到上述div的jquery对象
var $code = $("#code");
6. 调用jquery对象.qrcode函数 , 传递参数
$code.qrcode({
src:"二维码中间图标的地址",
width:数字,//填入数值即可, 不要加长度单位, 默认就是px
height:数字,//填入数值即可, 不要加长度单位, 默认就是px
text:"二维码的内容",
background:"#RRGGBB",//背景颜色,默认白色
foreground:"#RRGGBB",//前景颜色,默认黑色
render:"table"//二维码的绘制模式 , 支持1.table,2.canvas
});
layer弹出层插件 熟悉
步骤:
1. 引入jquery
2. 引入layer/layer.js
1. msg函数 , 弹出提示窗:
案例:
<script>
function x1(){
//普通提示窗
//layer.msg("发送完成");
//抖动提示窗
layer.msg("发送失败",function(){
//弹出窗体消失时 执行
});
}
</script>
</head>
<body>
<button onclick="x1()">点击发送短信</button>
2. 信息窗
格式:
layer.alert("弹出窗的内容",{icon:0-16});
案例:
function x1(number){
layer.alert("登录成功",{icon:number});
}
3. 加载层
弹出的格式:
var index = layer.load(0-2);
参数是: 图标
关闭的格式:
layer.close(index);
4. 带有文字提示的加载层
弹出的格式:
var index = layer.msg("提示的文字",{icon:16,shade:0.01});
关闭的格式:
layer.close(index);
5. tips层
格式:
layer.tips("提示内容","选择器",{tipsMore:true,tips:1/2/3/4});
参数:
1. tipsMore:true // 允许同时存在多个tips层
2. tips:1/2/3/4 //取值为数字1-4 , 分别表示弹出的方向: 上右下左
弹出层的关闭
layer.closeAll():
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
