JQuery学习笔记

• 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 = $("

abc

");
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("
段落");
对象.html();//取值

截取事件

• jq事件名称和js事件名称相比较 就是去掉on
  -页面加载完成事件
  $(function(){

})

$(document).ready(function(){

})

• 事件中获取事件源的方式
  1、如果是动态事件 this为事件源
  2、非动态绑定 var obj = event.target||event.srcEvent

• 事件模拟