3.精通前端系列技术之深入学习Jquery(一)

2022-05-29 20:46:46

使用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之位置操作

上一篇：『无为则无心』Python基础 — 16、Python序列之字符串的下标和切片


下一篇：Servlet（三）：获取表单数据、解决乱码和报错问题