zoukankan      html  css  js  c++  java

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

    使用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(123);//链式操作
    });
    
});



</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','456');/attr,属性值读取与操作
    $('div').attr('class','box');
    
});



</script>
</head>

<body>
<div title="123">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(1).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{ 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="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</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{ 100px; height:100px; background:red; padding:10px; border:10px #000 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(123);
        $('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:0; padding:0;}
#login{ 300px; height:300px; border:1px #000 solid; position:absolute;}
#close{ position:absolute; right:0; top:0;}
</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())/2 );
        oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 );
        
        
        $('#close').click(function(){
            
            oLogin.remove();
            
        });
        
        
        $(window).on('resize scroll',function(){
            
            oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
        oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(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(123);
    });
    
});



</script>
</head>

<body>
<div>div</div>
<span>span</span>
</body>
</html>

    20.jq之位置操作
  • 相关阅读:
    Path Sum II
    Convert Sorted Array to Binary Search Tree
    Construct Binary Tree from Inorder and Postorder Traversal
    Construct Binary Tree from Preorder and Inorder Traversal
    Maximum Depth of Binary Tree
    Binary Tree Zigzag Level Order Traversal
    Binary Tree Level Order Traversal
    Same Tree
    Validate Binary Search Tree
    Binary Tree Inorder Traversal
  • 原文地址：https://www.cnblogs.com/kingCpp/p/4838503.html
Copyright © 2011-2022 走看看