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"> < ...
随机推荐
- Linux_文件打包,压缩,解压
一.压缩命令 文件格式:*.gz 命令:gzip 文件名 (ps:不能压缩目录,切压缩后不保留原文件) 压缩前 -rw-r--r--. 1 root root 315 Sep 6 21:03 df.t ...
- CCS样式表
一.css样式表 1.样式表分类 1.内联式 <p style="font-size:18px;">This is an apple</p> 2.内嵌样式表 ...
- 配置DNS实验一例
1安装bind软件 2查看当前DNS服务 3修改配置文件 4测试
- 高德地图 室内地图 API 的一些坑
开发指南 http://lbs.amap.com/api/javascript-api/guide/create-map/indoormap/ demo 大全: http://lbs.amap.com ...
- Layer弹窗组件
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. Layer的开发手册和下载地址 http://layer ...
- Windows 8.1升级至Windows 10后，启动VisualSVN Server Manager报错：提供程序无法执行所尝试的操作 (0x80041024)的解决
1.1.Windows 8.1升级至Windows 10后,启动VisualSVN Server Manager报错:提供程序无法执行所尝试的操作 (0x80041024),VisualSVN Ser ...
- U3D--常用属性（不完整，待加）
1. AddComponentMenu 描述:这个属性可以在Component这个菜单栏下加自己定义的子菜单,这样可以快速添加常用的脚本.该属性要用在类上. using UnityEngine; us ...
- 【iCore3 双核心板_FPGA】例程十二：Modelsim仿真实验
实验指导书及代码包下载: http://pan.baidu.com/s/1bnQEldl iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- PSR : php编码规范
诸王混战 关于开发标准这块,可以说一直都是风格迥异,各家都有各家的玩法,民间更是个人玩个人的.目前我们国内比较出名的几个框架(Yii,Laravel) 都已经支持Composer并且加入了PHP-FI ...
- JS，分页
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...