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>
JQuery基础一的更多相关文章
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- 【jQuery基础学习】09 jQuery与前端（这章很水）
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 8、网页制作Dreamweaver（jQuery基础:安装、语法）
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
- jquery 基础汇总---导图篇
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- width，clientWidth，offsetWidth
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- SQL server 子查询、设置主键外键、变量及变量查询
一.子查询 子查询,又叫做嵌套查询. 将一个查询语句做为一个结果集供其他SQL语句使用,就像使用普通的表一样,被当作结果集的查询语句被称为子查询. 子查询有两种类型: 一种是只返回一个单值的子查询,这 ...
- VC 解密OUTLOOK pop3保存注册表密码
原文连接:https://forum.90sec.org/forum.php?mod=viewthread&tid=8410 作者:Agile 用过OUTLOOK的人都知道,OUTLOOK的密 ...
- 整数与IP地址间的转换
描述 原理:ip地址的每段可以看成是一个0-255的整数,把每段拆分成一个二进制形式组合起来,然后把这个二进制数转变成一个长整数.举例:一个ip地址为10.0.3.193每段数字 ...
- 文件代码对比软件 Beyond Compare
Beyond Compare https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=Beyond%20Co ...
- JSP页面转向方式
1.RequestDispatcher.forward() 是在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet or JSP到另外一个S ...
- BizTalk开发系列(八) BizTalk Server 常识整理
1.什么是BizTalk Server? BizTalk 是业务流程管理服务器,用于连接人员,流程,有效管理和提升业务所需的信息.在原有版本业务 流程管理和SOA/ESB 的基础上,第5 个版 ...
- css3:flexbox
旧弹性盒子 过渡弹性盒子 新弹性盒子 功能类似,次加了几个属性 新弹性盒子 参考1w3-En 参考2w3-Cn 参考3IBM 参考4doyoe 参考5caibaojian /*6个盒子属性.窍门:fl ...
- bootstrap组件学习
转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...
- Java 内存区域划分
JVM的内存区域划分 学过C语言的朋友都知道C编译器在划分内存区域的时候经常将管理的区域划分为数据段和代码段,数据段包括堆.栈以及静态数据区.那么在Java语言当中,内存又是如何划分的 ...