- JQuery是一个js语言的框架，作用是简化js代码
JQuery优势
- 简化js代码
- 可以向css一样通过选择器查找元素
- 可以直接修改元素的样式
- 解决兼容性问题
$
-
("#id") = jQuery("#id");
jQuery对象和js对象相互转换
("myinput").val;
把js对象转成jq对象
var jq = $(js);
把jq对象转成js对象
var js=jq[0] / jq.get(0);
选择器
基本选择器 和CSS一样
1、标签名选择 ("#id")
3、类选择器 ("#id,.class,div")
5、任意元素选择器 $("*")
层级选择器
1、("div>span") 匹配div下所有子元素
3、("div~span") 匹配div后面所有的span兄弟元素
层级函数
1、获取某个元素的所有兄弟元素
("d1").prev("div");//参数不写时获取相邻的上一个元素，写是指定上一个类型
3、获取某个元素的哥哥们元素
("d1").next("div")
5、获取某个元素的弟弟们元素
$("d1").nextAll("div");
过滤选择器
1、("div:last") 匹配所有div中的最后一个
3、("div:odd") 匹配所有的奇数位的元素 从0开始
5、("div:lt(n)") 匹配所有div中小于n个元素 从0开始
7、("div:not(.one)") 匹配所有div中class不等于one的元素
内容选择器
1、("div:empty") 匹配所有空的的div
3、("div:contains('abc')") 匹配所有包含文本abc的div
可见选择器
1、("div:visible") 匹配所有可见的div
-显示隐藏相关的函数
("#abc").show()//显示
$("#abc").toggle()//隐藏、显示切换
属性选择器
1、("div[id='d1']") 匹配有id属性为d1的div
1、$("div[id！='d1']") 匹配id属性不为d1的div
子元素选择器
1、("div:first-child") 匹配div中第一个元素
3、$("div:last-child") 匹配div中最后一个元素
表单选择器
1、(":password") 密码框
3、(":checkbox") 复选框
5、("input:ckecked")单选 下拉选
7、$(":selected") 下拉选
文档操作
1、创建元素
var div = $("<div>abc<div>");
2、添加元素
父元素.append(div); //添加到最后面
父元素.prepend(div);//添加到最前面
3、插入元素
兄弟元素.after(div); //插入到兄弟元素的后面
兄弟元素.before(div); //插入到兄弟元素的前面
4、删除元素
元素对象.remove();
样式
元素对象.css("color","red");
元素对象.css({"color":"red","width","100px");
对象.css("color");
属性
对象.attr("id","a");
对象.attr("id");
文本
对象.text("文本");
对象.text();//取值
html
对象.html("<p>段落</>");
对象.html();//取值
截取事件
- jq事件名称和js事件名称相比较 就是去掉on
-页面加载完成事件
$(function(){
})
$(document).ready(function(){
})
-
事件中获取事件源的方式
1、如果是动态事件 this为事件源
2、非动态绑定 var obj = event.target||event.srcEvent -
事件模拟
网友评论