3.精通前端系列技术之深入学习Jquery(一)
使用Jquery的好处：
- •简化JS的复杂操作
- •不再需要关心兼容性（原生js获取元素样式、事件需要做兼容性）
- •提供大量实用方法
1.选择网页元素
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head> <body>
<ul>
<li></li>
<li title="hello"></li>
<li class="box"></li>
<li class="box"></li>
<li title="hello"></li>
</ul>
<script>
('li:first').css('background','red');
('li:last').css('background','red');
$('li:eq(2)').css('background','red');//eq元素中的下标
$('li:odd').css('background','red');//偶数
$('li:even').css('background','red');//奇数 $('li').filter('.box').css('background','red');//filter筛选class是box的li $('li').filter('[title=hello]').css('background','red');//filter筛选title是hello的li </script>
</body>
</html>
2.jQuery设计思想之写法(方法函数化)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> //方法函数化: /*window.onload = function(){}; $(function(){}); function $(){} innerHTML = 123; html(123) function html(){} onclick = function(){}; click(function(){}) function click(){}*/ /*window.onload = function(){
var oDiv = document.getElementById('div1'); oDiv.onclick = function(){
alert( this.innerHTML );
}; };*/ $(function(){ //var oDiv = $('#div1'); $('#div1').click(function(){ alert( $(this).html() ); }); }); $('ul').children().css('background','red');//jq调用方法带上() </script>
</head> <body>
<div id="div1">div</div> </body>
</html>
3.jQuery设计思想之原生关系和链式操作（jq与js的关系）
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ $('#div1').click(function(){ //alert( $(this).html() ); //jq的写法 //alert( this.innerHTML ); //js的写法 alert( $(this).innerHTML ); //错误的
alert( this.html() ); //错误的 }); }); </script>
</head> <body>
<div id="div1">div</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> //链式操作
$(function(){ /*var oDiv = $('#div1'); oDiv.html('hello'); oDiv.css('background','red'); oDiv.click(function(){
alert(123);
});*/ $('#div1').html('hello').css('background','red').click(function(){
alert();//链式操作
}); }); </script>
</head> <body>
<div id="div1">div</div> </body>
</html>
4.jQuery设计思想之取值和赋值
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ //oDiv.innerHTML = 'hello'; //赋值 //alert( oDiv.innerHTML ); //取值 //$('#div1').html('hello'); //赋值 //alert( $('#div1').html() ); //取值 css('width','200px')
css('width')
}); </script>
</head> <body>
<div id="div1">div</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ //alert( $('li').html() ); //当一组元素的时候，取值是一组中的第一个 $('li').html('hello'); //当一组元素的时候,赋值是一组中的所有元素 }); </script>
</head> <body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</body>
</html>
5.jq常用方法之属性操作
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ //alert($('div').attr('title')); $('div').attr('title','');/attr,属性值读取与操作
$('div').attr('class','box'); }); </script>
</head> <body>
<div title="">div</div>
</body>
</html>
6.jq常用方法之过滤操作filter与not,针对元素自身做筛选
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> //filter : 过滤
//not : filter的反义词 $(function(){ //$('div').filter('.box').css('background','red'); $('div').not('.box').css('background','red'); }); </script>
</head> <body>
<div class="box">div1</div>
<div>div2</div>
</body>
</html>
7.jq常用方法之包含操作has //针对元素内部筛选
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> //has : 包含 $(function(){ //$('div').has('span').css('background','red'); //$('div').has('.box').css('background','red');
$('div').filter('.box').css('background','red'); }); </script>
</head> <body>
<div>div1<span class="box">span</span></div>
<div class="box">div2</div>
</body>
</html>
8.jq常用方法之next 下一个兄弟节点
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ $('div').next().css('background','red'); }); </script>
</head> <body>
<div>div</div>
<span>span</span>
<p>p</p>
</body>
</html>
9.jq常用方法之find 内部查找符合的元素 eq:元素组下标
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ //$('div').find('h2').css('background','red'); $('div').find('h2').eq().css('background','red'); }); </script>
</head> <body>
<div>
<h3>h3</h3>
<h2>h2</h2>
<h3>h3</h3>
<h3>h3</h3>
<h2>h2</h2>
<h2>h2</h2>
</div> <h2>h2</h2> </body>
</html>
10.jq常用方法之index
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ alert( $('#h').index() ); //索引就是当前元素在所有兄弟节点中的位置 }); </script>
</head> <body>
<div>
<h3>h3</h3>
<h2>h2</h2>
<h3>h3</h3>
<h3 id="h">h3</h3>
<h2>h2</h2>
<h2>h2</h2>
</div> <h2>h2</h2> </body>
</html>
11.jq编写选项卡
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}
.active{ background:red;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
/*window.onload = function(){
var oDiv = document.getElementById('div1');
var aInput = oDiv.getElementsByTagName('input');
var aCon = oDiv.getElementsByTagName('div'); for(var i=0;i<aInput.length;i++){ aInput[i].index = i; aInput[i].onclick = function(){ for(var i=0;i<aInput.length;i++){
aInput[i].className = '';
aCon[i].style.display = 'none';
} this.className = 'active';
aCon[this.index].style.display = 'block'; };
} };*/ $(function(){ $('#div1').find('input').click(function(){ $('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none'); $(this).attr('class','active'); $('#div1').find('div').eq( $(this).index() ).css('display','block'); }); });
</script>
</head> <body>
<div id="div1">
<input class="active" type="button" value="" />
<input type="button" value="" />
<input type="button" value="" />
<div style="display:block"></div>
<div></div>
<div></div>
</div>
</body>
</html>
12.jq之addClass removeClass
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ $('div').addClass('box2 box4'); $('div').removeClass('box1'); }); </script>
</head> <body>
<div class="box1 box2">div</div> </body>
</html>
13.jq之width
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{ width:100px; height:100px; background:red; padding:10px; border:10px # solid; margin:10px;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ alert( $('div').width() ); //width alert( $('div').innerWidth() ); //width + padding alert( $('div').outerWidth() ); //width + padding + border alert( $('div').outerWidth(true) ); //width + padding + border + margin }); </script>
</head> <body>
<div>div</div> </body>
</html>
14.jq之insertBefore insertAfter
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> //appendTo : appendChild $(function(){ //$('span').insertBefore( $('div') ); //$('div').insertAfter( $('span') ); //$('div').appendTo( $('span') );//最下面 //$('div').prependTo( $('span') );//最上面 //区别 ：后续操作变了 //$('span').insertBefore( $('div') ).css('background','red'); $('div').before( $('span') ).css('background','red'); }); </script>
</head> <body>
<div>div</div>
<span>span</span>
</body>
</html>
15.jq之remove
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ $('div').remove(); }); </script>
</head> <body>
<div>div</div>
<span>span</span>
</body>
</html>
16.jq的事件写法 on/off
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ /*$('div').click(function(){
alert(123);
});*/ /*$('div').on('click',function(){
alert(123);
});*/ /*$('div').on('click mouseover',function(){
alert(123);
});*/ /*$('div').on({
'click' : function(){
alert(123);
},
'mouseover' : function(){
alert(456);
}
});*/ $('div').on('click mouseover',function(){
alert();
$('div').off('mouseover');
}); }); </script>
</head> <body>
<div>div</div>
<span>span</span>
</body>
</html>
17.jq 之滚动距离
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ $(document).click(function(){ alert( $(window).scrollTop() ); //滚动距离 }); }); </script>
</head> <body style="height:2000px;">
<div>div</div>
<span>span</span>
</body>
</html>
18.jq之编写弹框
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:; padding:;}
#login{ width:300px; height:300px; border:1px # solid; position:absolute;}
#close{ position:absolute; right:; top:;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ //var oDiv = $('<div>div</div>');
//$('body').append( oDiv ); $('#input1').click(function(){ var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>'); $('body').append( oLogin ); oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/ );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/ ); $('#close').click(function(){ oLogin.remove(); }); $(window).on('resize scroll',function(){ oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/ );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/ + $(window).scrollTop() ); }); }); }); </script>
</head> <body style="height:2000px;">
<input type="button" value="点击" id="input1" />
<!--<div id="login">
<p>用户名:<input type="text" /></p>
<p>密码:<input type="text" /></p>
<div id="close">X</div>
</div>-->
</body>
</html>
19.jq之事件细节
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script> $(function(){ /*$('div').click(function(ev){ //ev : event对象 //ev.pageX(相对于文档的) : clientX(相对于可视区) //ev.which : keyCode ev.preventDefault(); //阻止默认事件 ev.stopPropagation(); //阻止冒泡的操作 return false; //阻止默认事件 + 阻止冒泡的操作 });*/ $('div').one('click',function(){ //只执行事件一次
alert();
}); }); </script>
</head> <body>
<div>div</div>
<span>span</span>
</body>
</html>
20.jq之位置操作
3.精通前端系列技术之深入学习Jquery(一)的更多相关文章
- 2.精通前端系列技术之JS模块化开发-深入学习seaJs（四）
深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...
- 2.精通前端系列技术之seajs和gruntJs结合开发（三）
1.我们先来了解下模块化历史 模块化历史 nodeJS的出现(http://nodejs.org/) commonJS规范(http://www.commonjs.org/) 浏览器JS的模块化? A ...
- 2.精通前端系列技术之seajs模块化使工作更简单（二）
drag.js // JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){ ; ...
- 2.精通前端系列技术之JavaScript模块化开发 seajs（一）
在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...
- 1.精通前端系列技术之js正则表达式
在不会正则的时候,我们寻找字符串某些规律或者截取部分特殊字符的时候,我们需要写很多行代码来获取我们想要的字符串,在使用正则之后,代码量会大量简洁很多 1.字符串的比较,判断是否数字类型的字符串,我们用 ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- 从零开始学习jQuery(转)
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
随机推荐
- Android AIDL Service
AIDL Service //跨进程调用Service 一个APK想调用另一个APK中的Service 如何实现AIDL //定义两个进程之间的通信接口 Demo1 传递简单数据 AidlSer ...
- hdu 5713(状态压缩DP)
要进行两次dp, 第一个,dp[i],1<=i<=(1<<n) 其中用i的二进制形式表示已选择的点. dp[i] 用来保存i中的点构成一个连通块,边集多少种可能. 转移方程: ...
- ie6 span 换行IE6中float:right换行问题的替代解决方案
在IE6,IE7下使用<span>标签时,在加入右浮动样式后,会换行的bug解决方案: bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...
- selenium 加载RemoteDriver浏览器驱动
title NodeWebDriver java -jar selenium-server-standalone-2.42.2.jar -Dwebdriver.ie.driver="C:\S ...
- ios 修改导航条返回按钮
ios 修改导航条返回按钮 方式一:使用系统的:可以更改系统的文字:以及通过设置导航条的颜色来达到预期的效果 UIBarButtonItem *backBtns = [[UIBarButtonItem ...
- ASP.NET Core文档中Work with Data章节的翻译目录
作为初学者看了相关的教程,遇到的问题有: 1. 教程不是针对初学者,往往在某一方面教的较深,但并不系统,不适合初学者: 2. 虽然翻译的很顺畅,但是谈了自己较多的开发体会,初学者看着困难,尤其是TOM ...
- 资源 之 4.4 Resource通配符路径（拾贰）
4.4.1 使用路径通配符加载Resource 前面介绍的资源路径都是非常简单的一个路径匹配一个资源,Spring还提供了一种更强大的Ant模式通配符匹配,从能一个路径匹配一批资源. Ant路径通配 ...
- data structure
转载请注明出处: 我所遇见的世界会更美好 我曾经逢人就说总是遇到这样那样错误无法解决,但是这些问题只要静下心来仔细思考根本没有解决不了的问题. 其实明明,超级超级简单,然而被老师讲的天花乱坠, 栈: ...
- .ecp认证文件（10.3版本）
arcgisserver,103,ecp.arcgis.engine,01-jan-2030,E9PJJE2G05FB8RZDF121 3dengine,103,ecp.arcgis.engine,0 ...
- 35 个免费创新的响应式 HTML5 模板
HTML5 和响应式都是 Web 开发领域中的热门技术,本文向你推荐 35 个免费的响应式 HTML5 模板,将两种技术完美结合. Mori responsive HTML5 Template Res ...