Jquery入门操作
- js文档加载完成的事件
三种书写方式
<!--导包,引入JQ的文件-->
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
//js文档加载完成的事件
window.onload = function(){
alert("window.onload 111");
}
/*文档加载完成的事件*/
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");
});
/*
jQuery 简写成 $
*/
$(document).ready(function(){
alert("$(document).ready(function()");
});
/*
最简单的写法
*/
$(function(){
alert("$(function(){");
});
</script>
- JQuery查找元素
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
//文档加载顺序
$(function(){
//获取到id选择器
$("#div1").html("李四");
// div1.innerHTML = "王五";
});
</script>
</head>
<body>
<div id="div1">张三</div>
</body>
- JQuery域Js对象之间的转换
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
function changeJS(){
var div = document.getElementById("div1");
// div.innerHTML = "JS成功修改了内容"
//将JS对象转成JQ对象
$(div).html("转成JQ对象来修改内容")
}
$(function(){
//给按钮绑定事件
$("#btn2").click(function(){
//找到div1
// $("#div1").html("JQ方式成功修改了内容");
//将JQ对象转成JS对象来调用
var $div = $("#div1");
// var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML="jq转成JS对象成功";
});
});
</script>
</head>
<body>
<input type="button" value="JS修改div内容" onclick="changeJS()" />
<input type="button" value="JQ方式修改div内容" id="btn2" />
<div id="div1">
这里的内容一会要被JS/JQ代码修改掉
</div>
<div id="div1">
这里的内容一会要被JS/JQ代码修改掉1111
</div>
</body>
- 显示隐藏动画
<!--
1. 导入JQ相关的文件
2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素
-->
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//显示页面图片
//给按钮绑定事件
$("#btn1").click(function(){
// $("#img1").show();
// $("#img1").slideDown();
// $("#img1").fadeIn(5000);
$("#img1").animate({ width:"800px",opacity:"1"},5000);
});
//隐藏页面图片
$("#btn2").click(function(){
//获得img
// $("#img1").hide(10000);
// $("#img1").slideUp(500);
// $("#img1").fadeOut(5000);
$("#img1").animate({ width:"1366px",opacity:"0.2"},5000);
});
});
</script>
</head>
<body>
<input type="button" value="显示" id="btn1" />
<input type="button" value="隐藏" id="btn2"/> <br />
<img src="../../img/333.png" id="img1" width="500px" />
</body>
JQuery学习案例
1. 使用JQuery完成页面定时弹出广告
- 技术分析
定时器:
setInterval clearInterval
setTimeout clearTimeout
显示: img.style.display = “block”
隐藏: img.style.display = “none”
img 对象
style属性: style对象 - 代码实现
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<!--
1. 导入JQ的文件
2. 编写JQ的文档加载事件
3. 启动定时器 setTimeout("",3000);
4. 编写显示广告的函数
5. 在显示广告里面再启动一个定时器
6. 编写隐藏广告的函数
-->
<script>
//显示广告
function showAd(){
//显示
$("#img1").slideDown(2000);
setTimeout("hideAd()",3000);
}
//隐藏广告
function hideAd(){
//隐藏
$("#img1").slideUp(2000);
}
//文档加载事件 在3秒后
$(function(){
setTimeout("showAd()",3000);
});
</script>
</head>
<body>
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img1" width="100%" style="display:none" />
</body>
2. 使用JQuery隔行换色
- 代码实现
<script>
$(function(){
//获得所有的行 : 元素选择器
$("tbody > tr:even").css("background-color","#CCCCCC");
//修改基数行
$("tbody > tr:odd").css("background-color","#FFF38F");
// $("tbody > tr").css("background-color","#FFF38F");
});
</script>
3. 全选和全不选
- 实现代码
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<!--
1. 导入JQ的包
2. 文档加载完成函数: 页面初始化
3. 获得所有的行 : 元素选择器
4. 根据行号奇数/偶数去修改颜色
-->
<script>
/*
表格全选和全不选
进一步确定事件: 点击事件
*/
$(function(){
//绑定点击事件
//this 代表的是当前函数的所有者
$("#checkAll").click(function(){
//获取当前选中状态
// alert(this.checked);
//获取所有分类项的checkbox
// 选择器[属性名称='属性值']
// $("input[type='checkbox']:gt(0)").prop("checked",this.checked);
//使用层级选择器来实现 tbody > tr > td > input
// $("tbody > tr > td > input").prop("checked",this.checked); //这个可行
// #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
$("input").prop("checked",this.checked);
});
});
4. 省市联动
- 代码实现
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
/*
准备工作 : 准备数据
*/
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
/*
1. 导入JQ的文件
2. 文档加载事件:页面初始化
3. 进一步确定事件: change事件
4. 函数: 得到当前选中省份
5. 得到城市, 遍历城市数据
6. 将遍历出来的城市添加到城市的select中
*/
$(function(){
$("#province").change(function(){
// alert(this.value);
//得到城市信息
var cities = provinces[this.value];
//清空城市select中的option
/*var $city = $("#city");
//将JQ对象转成JS对象
var citySelect = $city.get(0)
citySelect.options.length = 0;*/
$("#city").empty(); //采用JQ的方式清空
//遍历城市数据
$(cities).each(function(i,n){
$("#city").append("<option>"+n+"</option>");
});
});
});
</script>
</head>
<body>
<!--选择省份-->
<select id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city">
</select>
- 商品的左右选择
$(function(){
$("#a1").click(function(){
//找到被选中的那一项
//将被选中项添加到右边
$("#rightSelect").append($("#leftSelect option:selected"));
});
//将左边所有商品移动到右边
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" id="a1" > >> </a> <br />
<a href="#" id="a2"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
- 基本的JQuery小结
定时器
动画效果: show hide slideDown slideUp fadeIn fadeOut animate
基本选择器:
ID选择器: #ID名称
类选择器: .类名
元素选择器: 元素/标签名称
通配符选择器: * 找出所有页面元素 包含页面上所有的标签
选择器分组 : 选择器1, 选择器2 [选择器1,选择器2]
层级选择器:
后代选择器: 选择器1 选择器2 找出所有的后代,儿子孙子曾孙
子元素选择器: 选择器1 >选择器2 找出所有儿子
相邻兄弟选择器: 选择器1+选择器2 : 找出紧挨着自己那个弟弟
兄弟选择器 : 选择器1~选择器2 : 找出所有的弟弟
属性选择器:
选择器[属性名称]
选择器[属性名称][属性名名]
选择器[属性名称='属性值'][属性名称='属性值'][属性名称='属性值']
表单选择器:
:input 找出所有的输入项 : 不单单找出input textarea select
:text 找出type类型为 text
:password
基本过滤器:
:even 奇数
:odd 偶数
:gt() 小于
:lt() 小于
:eq() 等于
:first 第一个
:last 最后一个
表单对象属性:
:selected 下拉框选中
:checked 复选框选中
$(function) : 文档加载完成的事件
css() : 修改css样式
prop() : 修改属性/ 获取属性
html() : 修改innerHTML
append : 给自己添加子节点
appendTo : 将自己添加到别人家,给自己找一个爹
prepend : 在自己最前面添加子节点
after : 在自己后面添加一个兄弟
empty : 清空所有子节点
$(cities).each(function(i,n){
})
$.each(arr,function(i,n){
});
获取Jquery学习文档
参考资料声明:黑马程序员资料
扫一扫
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
