JQUERY与JS的区别 | JQUERY与JS的区别

JQUERY与JS的区别

<style type="text/css">

#aa

{

    width:200px;

    height:200px;

}

</style>

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

</head>


<body>

<div id="aa" style="">hello</div>

<div class="bb"></div>

<div class="bb"></div>

<div class="bb"></div>

<input type="text" name="cc" bs="dd" />

</body>

<script type="text/javascript">

JS：

//根据ID找元素,找到具体的DOM对象

var d = document.getElementById("aa");

var c = document.getElementsByClassName("bb");

var div = document.getElementsByTagName("div");

var input = document.getElementsByName("cc");

//操作内容

//1.非表单元素

d.innerHTML; d.innerTEXT;

//2.表单元素

d.value;

//操作属性

d.setAttribute("bs","pp"); //添加属性

d.getAttribute("bs");//获取属性

d.removeAttribute("bs");//移除属性

//操作样式

//d.style.color = "red";

//d.style.backgroundColor = "yellow";

//alert(d.style.width);


JQUERY：

$(document).ready(function(e) {

    //根据ID找元素，找出的JQUERY对象，如果要取DOM对象，取索引0的元素

    var jd = $("#aa"); //根据ID

    var jc = $(".bb"); //根据Class

    var di = $("div"); //根据标签名

    var ip = $("input[bs=dd]");//根据属性筛选

    for(var i=;i<jc.length;i++)

    {

        jc.eq(i); //取数组里面的第几个JQUERY对象

    }

    //操作内容

    //1.非表单元素

    jd.text();  jd.text("aa");

    jd.html();  jd.html("vv");

    //2.表单元素

    jd.val();

    //属性操作

    jd.attr("bs","aa");//设置属性

    jd.attr("bs"); //获取属性

    jd.removeAttr("bs");//移除属性

    //操作样式

    jd.css("background-color","green");

    //alert(jd.css("width"));

    //给一个元素加事件

    /*$("#aa").click(function(){

        alert("aa");

        })*/

    //给多个元素加事件

    /*$(".bb").click(function(){

        alert($(this).text());

        })*/

    //给多个元素设置相同样式(属性)

    //$(".bb").css("color","pink");

});

</script>

例：

<body>

<input type="checkbox" id="all" /> 全选<br />

<input class="t" type="checkbox" value="aa" /> aa

<input class="t" type="checkbox" value="bb" /> bb

<input class="t" type="checkbox" value="cc" /> cc

<input class="t" type="checkbox" value="dd" /> dd

<input class="t" type="checkbox" value="ee" /> ee

<input type="button" value="测试" id="btn" />

<input type="text" id="txt" />

<input type="button" value="设置选中" id="sel" />

</body>

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

<script type="text/javascript">

$(document).ready(function(e) {

    //全选

    $("#all").click(function(){

        var ck = $(".t");

        var xz = $(this)[0].checked;

        ck.prop("checked",xz);

        })

    //取选中项的值

    $("#btn").click(function(){

        var ck = $(".t");

        for(var i=0; i<ck.length;i++)

        {

            if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked

            {

                alert(ck.eq(i).val());

            }

        }

        })

    //设置某项选中

    $("#sel").click(function(){

        var v = $("#txt").val();

        var ck = $(".t");

        ck.prop("checked",false);

        for(var i=0;i<ck.length;i++)

        {

            if(ck.eq(i).val()==v)

            {

                ck.eq(i).prop("checked",true);

            }

        }

        })

});

</script>