12.9JQ基础

什么是JQ？

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

如何使用JQ

官网下载jquery.js文件
导入jquery文件
使用$===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);
})

html()

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

    red
    blue
    yellowgreen
    grey
    

        

        

        

        

    
    

js与jq区别

取值和赋值

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

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

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