jQuery入门

1. jQuery概述

web开发过程中要考虑不同的浏览器兼容的问题, jQuery框架把浏览器兼容这部门已经做好了,为开发人员节省了很大的工作量;
同时在对html标签操作上比起dom的操作方式, 格式上也得到了很大的简化, 是比较主流的js框架之一;

2 jQuery安装

jQuery有开发版和简化版本, 使用简化版本即可,上www.jquery.com上可以下载jQuery的版本;
将jquery文件拷贝到一个目录中,然后在html文件中引用这个文件,参考截图;

3. jQuery的使用

3.1 DOM对象与jQuery对象互相转换

1. DOM对象转化成jQuery对象
   例子:
   
2. jQuery对象转换为DOM对象
   例子:
   

3.2 jQuery的三个选择器

1. 基本选择器, 精准找到对应的标签对象
   $("#id")
   $(".class")
   $(“标签名”)

2. 父子关系
   $(“body div”) //body下的所有div标签
   $(“body>div”) // body下的子代div标签

3. 层级
   $(“input[type=text]:enabled”) //type=text且enabled的input标签;

4. 标签体操作
   jQuery获取的标签对象.html(“

   海马

   ”), 相当于给获取的标签体赋值, 新增html标签生效;

5. 属性操作
   jQuery获取的标签对象.attr(“键”) 读 , attr(“键”,“值”) 写;

6. jQuery循环遍历方法:
   例子:
   var lis=$(“li”);
   KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log((elelment).text()); //DOM对象转换为jQuery对象后调用.text()方法读出li标签体内容
   })

7. 集中动画效果的方法
   var mydiv=$("#mydiv");
   mydiv.hide(2000);
   mydiv.show(2000);
   mydiv.fadeOut(2000);
   mydiv.fadeIn(2000);

8. 为标签添加事件
   //jQuery标签对象添加一个事件
   $("#btn").on(“click”,function(){ 函数体 });

//jQuery标签对象添加多个事件
$("#btn").on({
“click”:function(){ },
“mouseOver”:function(){ }
})

//jQuery标签对象解除事件绑定
$("#btn").off(“mouseOver click”);