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属性和元素属性的区分值得 ...
随机推荐
- poj1873The Fortified Forest
链接 居然是WF的水题~ 二进制枚举砍哪些树,剩余的树围成一个凸包. 因为传数组WA了两发,忘记修改排序数组中的p[0]; #include <iostream> #include< ...
- jquery.pagination.js分页
参数说明 参数名 描述 参数值 maxentries 总条目数 必选参数,整数 items_per_page 每页显示的条目数 ...
- mysql 性能问题
1.场景,模拟一天的数据,每个10秒,遍历1000个设备,每个设备模拟一个实时数据,总的数据量为:24*60*60/10*1000 = 864万条记录.2.采用策略,对时间分段,拼接sql语句查询,对 ...
- Java源码初学_LinkedList
一.LinkedList的内部数据结构 LinkedList底层是一个链表的数据结构,采用的是双向链表,基本的Node数据结构代码如下: private static class Node<E& ...
- C++—函数探幽
一.内联函数 1.内联函数的机制 内联函数是C++为提高程序运行速度而做的一项改进. 函数调用机制:常规函数调用使程序使程序跳到被掉函数的地址,并在函数结束时返回. 内联函数的机制:内联函数的代码与其 ...
- Spring 定时任务的配置
1.applicationContext.xml 中 加入task 的声明与xsd ? 1 xmlns:task="http://www.springframework.org/schema ...
- Android布局_布局概述和LinearLayout布局
一.布局概述: 布局为UI提供了一个可视化的结构,比如对于一个activity或者app widget的UI,你可以用两种方式声明布局: 在XML中声明UI元素 在运行时实例化布局元素(在java代码 ...
- 线程池的原理及实现 (zhuan)
http://blog.csdn.net/hsuxu/article/details/8985931 ************************************************* ...
- 【Python】输出中文字符串的两种方法
print u"中文" # -*- coding: utf-8 -*- 这句话放在最上面,记得是最上面,顶格写 这样,print后,字符串前就不用加u了
- linux笔记：RPM软件包管理-rpm命令管理
rpm包命名原则: rpm包的依赖性: 包名和包全名: rpm软件包安装.升级和卸载: rpm软件包查询: 从rpm包中提取指定文件: