web前端 7 JQuery

JQuery

JQuery

JQuery是一个第三方JS库。它可以简化DOM操作，屏蔽了浏览器的兼容性问题。而已DOM操作，事件，动画效果，Ajax都可以简化实现。

引用JQuery库

1. 将JQuery.js下载到本地服务器，在script中调用该路径
2. 使用CDN网络上共享的JQuery.js 一般生产环境都使用这种方式

工厂函数

在JQuery中，无论使用哪种类型的选择符，都需要使用$() 所有能在样式表中使用的选择符，都要放到$()中的引号里

JQuery查找

基本选择器 和css一样 #id .class
层级选择器 和css一样 后台选择器 子代选择器
兄弟关系
$("...").prev/next() 相邻的前一个或者后一个元素
$("...").nextAll/prevAll() 之前或者之后的所有元素
$("...").siblings() 除了主机以外的所有兄弟

JQuery修改

$("...").attr("属性名") 获取元素属性
$("...").attr("属性名","值") 修改元素属性

$("...").html() 读取或者修改元素的html内容

$("...").text() 读取或者修改元素的文本内容

$("...").val() 读取或者修改元素的value的属性值

$("...").css("CSS属性名") 获取元素CSS样式
$("...").css("CSS属性名","值") 修改元素CSS样式

通过class批量修改样式

1. 判断是否有指定的class $("...").hasClass("类名")
2. 添加class $("...").addClass("类名")
3. 移除class $("...").removeClass("类名")

JQuery添加

1）创建新元素

var $new =$("html代码片段")

2）将新元素接入到DOM数

$(parent).append($new)

JQuery删除

$("...").remove()

JQuery事件绑定

$("...").bind("事件类型",funtion(e){...})

例如
$("...").bind("click",funtion(e){...}) 表示点击事件执行funtion函数
简写为$("...").click(funtion(e){...})

其中上面中e是事件对象，它可以记录事件相关信息