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属性和元素属性的区分值得 ...
随机推荐
- mtk lcm驱动加载流程 （转载）
平台:mt6582 + Android 4.4 前面就说过,在mtk代码中支持屏是可兼容的,通过调用驱动中的compare_id函数来匹配驱动和屏,这里来细看一下代码. 1. LK部分(mediate ...
- Win7_64位使用Mysql Odbc
1.首先不能安装Mysql Odbc 64位,因为我们的Mysql是32位,使用Mysql Odbc 64位连接Mysql 32位,报错:驱动程序与应用程序之间的体系结构不匹配. 2.要安装Mysql ...
- Java源码初学_HashSet&LinkedHashSet
一.概述 HashSet是建立在HashMap的基础上的,其内部存在指向一个HashMap对象的引用,操作HashSet实际上就是操作HashMap,而HashMap中所有键的值都指向一个叫做Dumm ...
- 如何查看与刷新DNS本地缓存
如何查看与刷新DNS本地缓存 一.查看DNS本地缓存 在cmd窗口输入:ipconfig/displaydns 二.刷新DNS本地缓存 在cmd窗口输入:ipconfig/flushdns 之后输入: ...
- iOS开发之 xcode6 APP 打包提交审核详细步骤
一. 在xcode6.1和ios10.10.1环境下实现app发布 http://blog.csdn.net/mad1989/article/details/8167529 http://jingya ...
- 牛客网 --java问答题
http://www.nowcoder.com/ 主要是自己什么都不怎么会.在这里可以学习很多的! 第一天看题自己回答,第二天看牛客网的答案! 1 什么是Java虚拟机?为什么Java被称作是“平台无 ...
- 为什么要使用Hibernate
因为! a paradigm mismatch between how data is represented in objects versus relational databases ! 对象数 ...
- ITERATOR（迭代器）设计模式
1 意图:提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象的内部表示. 2 别名(Cursor) 3 动机:队列表的访问和遍历从列表对象中分离出来放入一个迭代器对象中. 多态迭代 ...
- vs调试 LINK : fatal error LNK1104 ...exe
出现错误 LINK : fatal error LNK1104 ...exe (1)任务管理器中杀死...exe (2)此工程是复制过来的,但之前的已经装入内存,所以不能打开.重启VS即可.
- Linux 打包和压缩 方法详解
一般基因组的数据都非常大,所以都会 打包 压缩 后进行传输,拿到数据后的第一步必然就是要 解包 和 解压缩. 基本常识 首先要弄清两个概念:打包 和 压缩. 打包 是指将一大堆文件或目录变成一个总的文 ...