JavaScript-JQuery的常用操作

JQuery-基础

JQuery 的引入 （ http://code.jquery.com/）

<script src="js/jquery-1.12.4.min.js"></script>

JQuery 入口函数的编写

<script src="js/jquery-1.12.4.min.js"></script><script>
    window.onload = function(){
        var oDiv = document.getElementById('div01');
        alert('原生就是获取的div：' + oDiv);
    };

    /*
    $(document).ready(function(){
        var $div = $('#div01');
        alert('jquery获取的div：' + $div);
    });
    */

    // 上面ready的写法可以简写成下面的形式：
    $(function(){
        var $div = $('#div01');
        alert('jquery获取的div：' + $div);
    });
</script>

<div id="div01">这是一个div</div>

JQuery-选择器

常用选择器

标签选择器
$('li') //选择所有的li标签

类选择器
$('.myClass') // 选择class为myClass的标签

id 选择器
$('#myId') //选择id为myId的标签

层级选择器
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签

属性选择器
$('input[name=first]') // 选择name属性等于first的input标签

has(选择器名称)方法，表示选取包含指定选择器的标签

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});
    });
</script>

<div>
    这是第一个div
    <input type="text" id="mytext"></div>

<div>
    这是第二个div
    <input type="text">
    <input type="button"></div>

eq(索引)方法，表示选取指定索引的标签

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});


        //  eq方法的使用
        var $div = $("div").eq(1);
        //  设置样式
        $div.css({"background":"yellow"});
    });
</script>

<div>
    这是第一个div
    <input type="text" id="mytext"></div>


<div>
    这是第二个div
    <input type="text">
    <input type="button"></div>