-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2019-06-11
来源 ：
阅读 500
评论 0
摘要：本篇文章探讨了jQuery小白学习基础教程（1），希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
本篇文章探讨了jQuery小白学习基础教程（1），希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
<
jquery 使用方法
1、在浏览器点击F12，调出源码设置端点F11进行调试
2、要操作DOM对象，首先要把DOM对象封装成juery对象:
jQuery(document).ready(function () {
alert('页面加载完了2');
});
juery = $,
3、jQuery页面加载完成写法
$(function () {
alert('加载完了');
});
4、map是对数组遍历 ,arg参数一般不用理
var arr = [1, 2, 4, 5, 6, 7];
var arrs = $.map(arr, function () {
alert((arguments);//返回function ()函数有几个参数
alert((arguments[0]);//返回function ()函数第一个参数
});
var arrs= $.map(arr, function (ele, index) {
return ele * 2;//返回元素值改变后的数组
});
$.map(arr, function (ele, index) {
alert(ele+'==='+index);
//alert(arguments[0]+'==='+arguments[1]+'=='+arguments[2]);
});
5、each对键值对遍历,arg参数一般不用理
var arr = [45, 56, 43, 23, 112];
$.each(arr, function (k, v) {
//k---索引,v值
alert(k+'=='+v);
});
var arr = { "yzk": "椰子壳", "jk": "接口", "ml": "玛丽" };
$.each(arr, function (k, v) {
//k====键,v====值
alert(k+'=='+v);
});
6、$.trim取掉空格
// var msg = ' 感冒真舒服,一般都不感冒 ';
// alert('==' +$.trim(msg)+'==');
7、dom对象转换为jqurey对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
document.getElementById('btn').onclick = function () {
//dom对象
// var dvObj = document.getElementById('dv');
// var jq = $(dvObj); //dom对象转jquery对象
// //var dd= jq.get(0);//jquery对象转dom对象
// var dd = jq[0];
//链式编程
// $(dvObj).css('width', '300px').css('height', '200px').css('backgroundColor', 'yellow').text('哈哈哈');//如果写内容了 那么就是设置，如果没写就是获取
//jquery写法
// $(dvObj).css('width', '300px');
// $(dvObj).css('height', '200px');
// $(dvObj).css('backgroundColor', 'yellow');
// $(dvObj).text('<font color="red",size="7">哈哈哈 太帅了</font>');
// dvObj.style.width = '300px';
// dvObj.style.height = '200px';
// dvObj.style.backgroundColor = 'yellow';
};
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<div id="dv">
</div>
</body>
</html>
8、id选择器,标签选择器,类选择器,优先级：标签选择器->类选择器->id选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*id选择器,标签选择器,类选择器*/
/*id选择器
#dv
{
width:300px;
height:200px;
background-color:Yellow;
}*/
/*标签选择器
div
{
width:300px;
height:200px;
background-color:Yellow;
}*/
/*类选择器
.cls
{
width: 300px;
height: 200px;
background-color: Yellow;
}*/
</style>
</head>
<body>
<div id="dv">
</div>
<div>
</div>
</body>
</html>
9、选择器获取元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//点击按钮 改变层的样式，并且在层中 来个font标签 显示样式
//页面加载了
$(function () {
$('#btn').click(function () {
$('#dv').css('width', '300px').css('height', '200px').css('backgroundColor', 'orange').html('<font color="red" size="7" face="全新硬笔行书简">我会用挖掘机控制计算机开飞机</font>');
$(this).val('嘎嘎');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="哈哈" id="btn" />
<div id="dv">
</div>
</body>
</html>
标签选择器、类选择器获取元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
.cls
{
background-color:Orange;
border:1px solid red;
}
</style>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
// $('p').text('我们都是好人'); //隐式迭代
$('.cls').text('文能提笔控萝莉');
// so easy --各种选择器
});
});
</script>
</head>
<body>
<input type="button" name="name" value="改变" id="btn" />
<p>床前明月光
</p>
<p>疑是地上霜
</p>
<p>举头望明月
</p>
<p>低头思故乡
</p>
</body>
</html>
标签改变，鼠标形状改变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('p').click(function () {
$(this).text('我心疼坏了').css('color', 'red');
}).mouseover(function () {
$(this).css('cursor', 'pointer');
}).mouseout(function () {
$(this).css('color', '');
});
});
</script>
</head>
<body>
<p>
锄禾日当午
</p>
<p>
汗滴禾下土
</p>
<p>
谁知盘中餐
</p>
<p>
粒粒皆辛苦
</p>
</body>
</html>
多条件选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
// $(function () {
// $('#btn').click(function () {
// //$('div.cls').css('backgroundColor','green');
// });
//
// });
</script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//多条件选择器
$('p,strong,div.cls').css('backgroundColor','red');
});
});
</script>
<style type="text/css">
.cls
{
width:100px;
height:50px;
background-color:Orange;
}
</style>
</head>
<body>
<input type="button" name="name" value="效果" id="btn" />
<p>
这是p
</p>
<strong>这是strong</strong>
<div>
</div>
<div style=" width:300px; height:200px; background-color:Yellow;">
</div>
</body>
</html>
层选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//所有的
// $('*').css('backgroundColor', 'red');
//层中所有的p标签,
// $('div p').css('backgroundColor','red');
//直接的子元素，如果在直接的子元素中还有该元素.那么也可以
//$('div>p').css('backgroundColor', 'red');
//层后面的直接的p标签
//$('div+p').css('backgroundColor', 'red');
//层后面所有的p标签
//$('div~p').css('backgroundColor', 'red');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<p>
这是p标签第一个
</p>
<p>
这是第二个p标签
</p>
<div style="width: 300px; height: 200px; background-color: Green;">
<p>
层中的第一个
</p>
<p>
层中的中间的<p>
层中的p中的p</p>
</p>
<p>
层中的第二个
</p>
<strong>
<p>
strong中的p</p>
</strong>
</div>
<p>
层后面的第一个
</p>
<strong>content</strong>
<p>
层后面的第二个
</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//层后面的第一个
// $('div').next().css('color','red');
//层后面所有的
//$('div').nextAll().css('color','blue');
//层前面的第一个
//$('div').prev().css('color', 'blue');
//层前面所有的
// $('div').prevAll().css('color', 'blue');
//兄弟元素
//$('#p1').siblings().css('color', 'blue');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<p id="p1">
这是P</p>
<p>
这是P</p>
<div style=" width:300px; height:200px; background-color:Yellow;">
<p>
这是P</p>
<p>
这是P</p>
<p>
这是P</p>
</div>
<strong>content</strong>
<p>
这是P</p>
<p>
这是P</p>
</body>
</html>
页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。
$(function () {
// $('#uu li').mouseover(function () {
// $(this).css('backgroundColor', 'red');
// }).click(function () {
// // $(this).prevAll('li').css('backgroundColor', 'yellow');
// // $(this).nextAll('li').css('backgroundColor', 'blue');
// //第二种方式
// $(this).prevAll('li').css('backgroundColor', 'yellow').end().nextAll('li').css('backgroundColor', 'blue');
// }).mouseout(function () {
// $(this).css('backgroundColor', '');
// });
// if ($('#uu1').length) {
// alert('存在');
// } else {
// alert('不存在');
// }
});
</script>
</head>
<body>
<ul id="uu">
<li>热火</li>
<li>骑士</li>
<li>马刺</li>
<li>雷霆</li>
<li>公牛</li>
<li>小牛</li>
<li>火箭</li>
</ul>
</body>
</html>
prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。
10、元素添加与移除类样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//为某个元素添加类选择器的样式
$('#p1').addClass('cls');
});
$('#btnrem').click(function () {
//移除的是所有的类样式
$('#p1').removeClass();
});
});
</script>
<style type="text/css">
.cls
{
background-color:Yellow;
}
.cls1
{
color:Blue;
}
p
{
font-size:100px;
}
</style>
</head>
<body>
<input type="button" name="name" value="添加样式" id="btn" />
<input type="button" name="name" value="移除样式" id="btnrem" />
<p id="p1">这是p
</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btnoff').click(function () {
//$('body').addClass('cls');
//$('body').toggleClass('cls');
// if ($('body').hasClass('cls')) {
// $('body').removeClass('cls');
// } else {
// $('body').addClass('cls');
// }
});
});
</script>
<style type="text/css">
.cls
{
background-color:Black;
}
</style>
</head>
<body>
<input type="button" name="name" value="关灯/开灯" id="btnoff" />
<p>这是p
</p>
</body>
</html>
11、过滤器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
width:200px;
height:100px;
background-color:Orange;
margin-bottom:10px;
}
</style>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
// $('ul').first().css('backgroundColor','red');
// $('ul :first').css('backgroundColor', 'red');
// $('ul li:first').css('color','red');
//偶数 但是显示效果的时候奇数
//$('ul li:even').css('color','red');
//奇数 显示效果是偶数
$('ul li:odd').css('color','red');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<ul>
<li>乔峰</li>
<li>西门吹雪</li>
<li>梅超风</li>
<li>杨过</li>
<li>乔布斯</li>
<li>老马</li>
</ul>
</body>
</html>
12、按元素序号获取元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
width: 300px;
height: 30px;
background-color: Green;
margin-bottom: 20px;
}
</style>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//索引获取元素
//$('div:eq(3)').css('backgroundColor','red');
//索引小于3的元素
//$('div:lt(3)').css('backgroundColor', 'red');
//索引大于3的元素
// $('div:gt(3)').css('backgroundColor', 'red');
// $('div:gt(3):lt(2)').css('backgroundColor', 'red');
//$(':header').css('backgroundColor', 'red');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<h1>
第一个</h1>
<h2>
第一个</h2>
<h3>
第一个</h3>
<h4>
第一个</h4>
<h5>
第一个</h5>
<h6>
第一个</h6>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
table行点谁谁变黄,siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#tb tr').click(function () {
$(this).css('backgroundColor', 'yellow').siblings('tr').css('backgroundColor', '');
});
});
</script>
</head>
<body>
<table border="1" id="tb" style=" cursor:pointer;">
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐姐
</td>
</tr>
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐姐
</td>
</tr>
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐姐
</td>
</tr>
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐姐
</td>
</tr>
<tr>
<td>
芙蓉姐姐
</td>
<td>
凤姐姐
</td>
</tr>
</table>
</body>
</html>
星级评分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#tb td').mouseover(function () {
$(this).text('★').prevAll('td').text('★');
}).mouseout(function () {
$('#tb td').text('☆');
});
});
</script>
</head>
<body>
<table border="1" id="tb" style=" cursor:pointer;">
<tr>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
</tr>
</table>
</body>
</html>
相对元素,$('div p').css('color','red');用相对元素实现('p', $('div')).css('color','red');
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//$('div p').css('color','red');
$('p', $('div')).css('color','red');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<div style=" width:300px; height:200px; background-color:Green;">
<p>
这是p</p>
</div>
</body>
</html>
本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
