12.9JQ基础

2016-12-11 本文已影响0人 overisover

什么是JQ？

一个优秀的JS库写越少的代码，做越多的事情
好处：
简化JS的复杂操作（省略循环）
不再需要关心兼容性
提供大量实用方法
JQ官网：http://jquery.com/
中文版文档：http://www.jquery123.com/
开源网站：http://www.bootcdn.cn/
jquery的版本：
压缩版(compressed) 与开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）

如何使用JQ

官网下载jquery.js文件
导入jquery文件<script src="jquery.js"></script>
使用$===jQuery引用；
$是jq的标志；是一个函数；

参数说明：$(this);$('字符串')，$(jq对象)
jq根据css的字符串获取元素

选择元素:

id:$('#div1').css('background','red');
tag:$('div').css('background','red');
class:$('.box').css('background','red');

绑定事件

是：addEventListener方法添加事件;可以添加多个
$('li').click(function(){
alert(3);
})

<script>
        // $('#test').css('background','red');
        // $('.test').css('background','red');
        $('div').css('background','red');
        //循环绑定事件
        //不是真的没有循环, css内部还是执行了循环
        // $('#div1') 获取的是一个集合(数组)  [  '#div1' ]
        // $('li').click(function(){
        //  alert(3);
        // })
        //弹出标签内容
        alert($('#li1').html());
    </script>

html()

html(),
传递字符串参数表示赋值，返回jquery对象。
不传参数，就表示取值
$('#li1').html('aaa');吧aaa赋值给li;
($('#li1').html()读取li的内容；
点击不同的颜色改变li的颜色
$(this)将原生的dom对象转为jq对象，

<body>
    <span>red</span>
    <span>blue</span>
    <span>yellowgreen</span>
    <span>grey</span>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var $span=$('span');
        var $li=$('li');
        var color='';
        $span.click(
            function(){
                // //js做法
                // color=this.innerHTML;
                //jq做法，this为原生dom对象；
                color=$(this).html();//$(this)将原生的dom对象转为jq对象，
            }
        )
        $li.click(
                function(){
                $(this).css('background',color)
            }
        )
    </script>
</body>

js与jq区别

<script>
// obj.innerHTML = 'bbb';

//html: 不传参数，获取值 ， 传入参数，设置
alert( $('li').html('bbb') );


var div = document.getElementById('div1');
//原生dom对象
div.style  div.innerHTML  div.offsetWidth


var $div = $('#div1');
//jquery对象的方法
// $div.css  $div.html  $div.click


// jquery对象和原生dom对象不能混用


div.css('background', 'red');//错误

$div.innerHTML;//错误
</script>

取值和赋值

是否取值或赋值是通过传入参数的个数决定的，传人返回字符串
常用的:

html();
css()
attr() 属性
val() 值

$div.html();//取值
$div.html('text');//赋值；

<script>
// .css

// $('div').css('background', 'red');//赋值，在内联样式中；


//返回最终计算后的样式
// alert( $('div').css('background') ); //取值，


//.attr  attribute
//div.getAttribute  div.setAttribute

// $('#div1').attr('ssss', 'test');
// alert( $('div').attr('ssss') );


//.val   value

//input
$('input').val('22222');

alert( $('input').val() );

</script>

<script>
    //html()
    alert($('#div1').html());//读取内容
    $('#div1').html('哦哈呦');//赋值
    //attr attibute
    //div.getAttribute  div.setAttribute
    $('#div1').attr('id','dd'); //修改属性

    alert($('div').attr('id'));//读取id
    //css
    $('div').css('background','red');//赋值
    //val
    $('input').val('bbb');//赋值
    alert($('input').val());//读取值
</script>