JQuery基础一

时间:2023-03-10 07:15:36
JQuery基础一

http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html  

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 class="cls">
</div>
</body>
</html>

9、选择器获取元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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 class="cls">疑是地上霜
</p>
<p>举头望明月
</p>
<p>低头思故乡
</p>
</body>
</html>

标签改变,鼠标形状改变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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 class="cls"> </div> <div style=" width:300px; height:200px; background-color:Yellow;"> </div>
</body>
</html>

层选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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" class="cls1">这是p
</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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>