什么是JQuery以及JQuery事件绑定

1、JQuery概述及JQuery操作

JQuery是快速简洁的第三方JS库

JQuery的核心理念是write less ,do more

JQuery的特点（为什么要用JQuery）

1、JQuery是DOM的终极简化  2、屏蔽了浏览器的兼容问题

如何使用JQuery

1、先将JQuery下载到服务器本地，在script中使用服务器路径

2、使用CDN网络上共享的JQuery.js生产环境中用的最多

工厂函数：在JQuery中无论使用使用哪种类型的选择符，都要从一个美元符号$和一对圆括号开始：$()  并且所有能在样式表中使用的选择符都能放到这个圆括号中的引号内

<ul id="myList">
    <li id="m1">首页</li>
    <li id="m1">企业介绍</li>
    <li id="m1">联系我们</li>
</ul>

DOM:
document.getElementById('myList');
Jquery:
$("#myList");

2、JQuery增删改查操作

1、基本选择器  #id.class   与CSS相同

2、层级选择器后代选择器  子代选择器  与CSS相同

3、兄弟选择器

$("...").next/prev()   紧邻的前一个或者后一个元素

$("...").nextAll/prevAll()  之前或者之后的所有元素

$("...").siblings()  除了自己之外的所有兄弟

1、修改

一、属性
1、获取
$("...").attr("属性名")
获取北京市节点的name属性值
$bj.attr("name");

2、修改
$("...").attr("属性名","值")
设置北京市节点的name属性值
$bj.attr("name","beijing");

二、内容
1、html操作
html()   读取或修改节点的HTML内容
$("p").html()  获取元素的HTML代码

直接修改p里面的代码
$("p").html("<strong>你最喜欢的水果是?</strong>");

2、文本操作
text():  读取或修改节点的文本内容
获取<p></p>元素的文本：
$("p").text();
设置<p></p>元素的文本
$("p").text("你最喜欢的水果是？")；

3、值操作
val();  读取或修改节点的value属性值
获取按钮的value值
$("input:eq(5").val();
设置按钮的value值
$("input").val("我被点击了！");

三、样式
1、直接修改css属性
获取CSS样式（计算后的样式）
$("...").css("CSS属性名")
修改CSS样式
$("...").css("CSS属性名"，值);

2、通过class批量修改样式
(1)判断是否包含指定class
$("...").hasClass("类名")
(2)添加class
$("...").addClass("类名")
(3)移除class
$("...").removeClass("类名")

2、添加

1、创建新元素
var $new=$("html代码片段")
2、将新元素结尾添加到DOM树
$(parent).append($newelem)

var $li=$("<li title='香蕉'>香蕉</li>");
var $parent=$("ul");
$parent.append($li);

3、删除

$("...").remove

获取第二个<li></li>元素节点后，将他从网页中删除
$("ul li:eq()").remove();
把<li></li>元素中属性title不等于“菠萝”的<li></li>元素删除
$("ul li").remove("[title!=菠萝]");

2、JQuery事件绑定

语法：
$("...").bind("事件类型",function(e){...})

例：
$("...").bind("click",function(e){...})
简写形式：
$("...").click(function(e){...})

$("#btn").click(function(e){
    console.log("hello");
})

事件对象纪录事件发生时鼠标的位置、键盘按键状态和触发对象等信息

clientX/offsetX/pageX/screenX/x:事件发生的X坐标
clientY/offset/pageY/screenY/y:事件发生的Y坐标
keyCode:键盘事件中按下的按键值