使用Jquery的好处：

  1. •简化JS的复杂操作
  2. •不再需要关心兼容性（原生js获取元素样式、事件需要做兼容性）
  3. •提供大量实用方法

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(一)的更多相关文章

  1. 2.精通前端系列技术之JS模块化开发-深入学习seaJs（四）

    深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...

  2. 2.精通前端系列技术之seajs和gruntJs结合开发（三）

    1.我们先来了解下模块化历史 模块化历史 nodeJS的出现(http://nodejs.org/) commonJS规范(http://www.commonjs.org/) 浏览器JS的模块化? A ...

  3. 2.精通前端系列技术之seajs模块化使工作更简单（二）

    drag.js // JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){ ; ...

  4. 2.精通前端系列技术之JavaScript模块化开发 seajs（一）

    在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...

  5. 1.精通前端系列技术之js正则表达式

    在不会正则的时候,我们寻找字符串某些规律或者截取部分特殊字符的时候,我们需要写很多行代码来获取我们想要的字符串,在使用正则之后,代码量会大量简洁很多 1.字符串的比较,判断是否数字类型的字符串,我们用 ...

  6. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  7. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  8. 从零开始学习jQuery(转)

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  9. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

随机推荐

  1. mysql5.1版本 my.cnf中复制的配置不起作用

    原因是:在mysql存放数据的目录下面有一个文件master.info,mysql服务器认为 master.info比my.cnf优先级要高,第一次启动slave,master.info不存在,从my ...

  2. 理解odbc

    1.解决什么样的问题?不同的数据库产品,具有不同的特性,也就是方言.因此应用程序针对不同的数据库产品,编写不同的代码.如果换了一个数据库产品,还需要重新编写数据库交互部分,不具备扩展和移植.odbc对 ...

  3. Poco C++——JSON解析

    #include <iostream> #include "Poco/Dynamic/Var.h" #include "Poco/Dynamic/Pair.h ...

  4. 测试分页查询出数据并分文件导出[java工程]

    package cn.shiyanjun.test; import java.util.ArrayList; import java.util.List; public class ExcelTest ...

  5. ITERATOR（迭代器）设计模式

    1 意图:提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象的内部表示. 2 别名(Cursor) 3 动机:队列表的访问和遍历从列表对象中分离出来放入一个迭代器对象中.   多态迭代   ...

  6. features recreate的含义

    就是从数据库里导出这个features的代码块.

  7. js用ajax和不同页面的php互相传值的方法

    js里的代码:<script> var json; //获取所有class名为zhi的标签 var zhi = document.getElementsByClassName('zhi') ...

  8. 【CodeForces 651A】Joysticks 模拟

    题意:给定a,b,每个单位时间可以将a,b中一台加1,一台减2,求最久可以支持多久. #include <cstdio> #include <algorithm> using ...

  9. javascript 盒子模型

    oDiv.clientWidth--->width+左右padding oDiv.clientHeight--->height+上下padding oDiv.clientTop---> ...

  10. robotframework笔记4

    机器人框架概述   机器人框架是一个通用的开源的自动化测试框架 验收测试和验收测试驱动开发(ATDD).它具有易于使用的表格的测试数据 语法采用关键字驱动 测试方法.其检测能力可以通过测试库 用Pyt ...