JQuery

JQuery

一个由js语言书写的框架，用于简化js代码的
可以像css一样获取元素对象，可以直接修改元素的样式，解决兼容性问题

js对象和jq对象互相转换

• 通过以下写法可以得到jq对象
  $("#id")
• 给jq对象动态绑定点击事件
  $("#id").click(function(){});
• 把jq对象转成js对象
  jqobj[0] 或 jqobj.get(0)
• 把js对象转成jq对象
  $(jsobj)
• $=jQuery
  $("#id") = jQuery("#id")

jQuery选择器

基本选择器

1. 标签名选择器
   $(“div”)
2. id选择器
   $("#id")
3. 类选择器
   $(".class")
4. 分组选择器
   $(“div,#id,.class”)
5. 所有元素选择器
   $("*")

层级选择器

1. $(“div span”) 匹配div里面所有的span
2. $(“div>span”) 匹配div里所有的span子元素
3. $(“div+span”) 匹配div后面相邻的兄弟元素 (弟弟元素)
4. $(“div~span”) 匹配div后面所有的兄弟元素 (弟弟们元素)

层级函数

1. 获取某个元素的所有兄弟元素
   $("#one").siblings();
   $("#one").siblings(“div”); //id为one的所有div兄弟元素
2. 获取元素的哥哥元素
   $("#one").prev(“span”);
3. 获取元素的哥哥们元素
   $("#one").prevAll(“span”);
4. 获取元素的弟弟元素
   $("#one").next(“span”);
5. 获取元素的弟弟们元素
   $("#one").nextAll(“span”);

过滤选择器

1. $(“div:first”) 匹配所有div中的第1个
2. $(“div:last”) 匹配所有div中的最后一个
3. $(“div:even”) 匹配所有div中下标是偶数的元素 位置从0开始
4. $(“div:odd”) 匹配所有div中下标是奇数的元素 从0开始
5. $(“div:eq(n)”) 匹配所有div中的第n个 从0开始
6. $(“div:lt(n)”) 匹配所有div中小于n的元素 从0开始
7. $(“div:gt(n)”) 匹配所有div中位置大于n元素 从0开始
8. $(“div:not(.abc)”) 匹配所有div 除去class值为abc的元素

内容选择器

1. $(“div:has§”) 匹配所有包含p标签的div
2. $(“div:empty”) 匹配不包含内容的div
3. $(“div:parent”) 匹配包含内容的div
4. $(“div:contains(‘abc’)”) 匹配包含文本abc的div元素

可见选择器

1. $(“div:hidden”) 匹配所有隐藏的div元素
2. $(“div:visible”) 匹配所有显示的div元素

显示相关的函数

1. $(“div:hidden”).show(); //让隐藏的元素显示
2. $(“div:visible”).hide();//让显示的元素隐藏
3. $("#id").toggle(); //隐藏显示切换

属性选择器

1. $(“div[id]”) 匹配包含id属性的所有div
2. $(“div[id=‘d1’]”) 匹配包含id=d1的所有div
3. $(“div[id!=‘d1’]”) 匹配包含id不等于d1的所有div

子元素选择器

1. $(“div:first-child”) 匹配是div并且是子元素并且是第一个
2. $(“div:last-child”) 匹配是div并且是子元素并且是最后一个
3. $(“div:nth-child(n)”) 匹配是div并且是子元素并且是第n个

表单选择器

1. $(":input") 匹配所有的表单中的控件 按钮、文本框、密码框、单选。。。。
2. $(":password") 匹配所有的密码框
3. $(":radio") 匹配所有单选
4. $(":checkbox") 匹配所有多选
5. $(":checked") 匹配所有被选中的 单选、多选、下拉选
6. $(“input:checked”) 匹配所有被选中的 单选、多选
7. $(":selected") 匹配所有下拉选被选中的内容

对页面中元素进行增删改查的操作

1. 创建元素
   var div = document.createElement(“div”);
   var div = $(“
   abc
   ”);
2. 添加元素
   $("#big").append(div);
3. 插入元素
   兄弟元素.after(div) //兄弟元素的后面
   兄弟元素.before(div) //兄弟元素的前面
4. 删除元素
   $("#abc").remove();//删除id为abc的元素
5. 样式
   $("#abc").css(“属性名”,“值”);//赋值
   $("#abc").css({“属性名1”:“值1”,“属性名2”:“值2”});//赋值
   $("#abc").css(“属性名”);//取某个样式的值
6. 文本 等效 innerText
   $("#abc").text(“文本内容”);//赋值
   $("#abc").text();//取值
7. html 等效 innerHTML
   $("#abc").html(“abc”);//赋值
   $("#abc").html();//取值
   8.属性
   $("#abc").attr(“属性名”,“值”);//赋值
   $("#abc").attr();//取值

事件模拟

• 可以通过代码触发元素的事件
• trigger()触发事件
  setTimeout(function(){
  //模拟按钮的点击事件
  $(“input”).trigger(“click”);
  },3000);

hover 等效 onmouseover+onmouseout
.
$(“div”).hover(function(){
//鼠标移入元素时执行
$(“div”).css(“color”,“red”);
},function(){
//鼠标移出元素时执行
$(“div”).css(“color”,“green”);
})