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选择器
基本选择器
- 标签名选择器
$(“div”) - id选择器
$("#id") - 类选择器
$(".class") - 分组选择器
$(“div,#id,.class”) - 所有元素选择器
$("*")
层级选择器
- $(“div span”) 匹配div里面所有的span
- $(“div>span”) 匹配div里所有的span子元素
- $(“div+span”) 匹配div后面相邻的兄弟元素 (弟弟元素)
- $(“div~span”) 匹配div后面所有的兄弟元素 (弟弟们元素)
层级函数
- 获取某个元素的所有兄弟元素
$("#one").siblings();
$("#one").siblings(“div”); //id为one的所有div兄弟元素 - 获取元素的哥哥元素
$("#one").prev(“span”); - 获取元素的哥哥们元素
$("#one").prevAll(“span”); - 获取元素的弟弟元素
$("#one").next(“span”); - 获取元素的弟弟们元素
$("#one").nextAll(“span”);
过滤选择器
- $(“div:first”) 匹配所有div中的第1个
- $(“div:last”) 匹配所有div中的最后一个
- $(“div:even”) 匹配所有div中下标是偶数的元素 位置从0开始
- $(“div:odd”) 匹配所有div中下标是奇数的元素 从0开始
- $(“div:eq(n)”) 匹配所有div中的第n个 从0开始
- $(“div:lt(n)”) 匹配所有div中小于n的元素 从0开始
- $(“div:gt(n)”) 匹配所有div中位置大于n元素 从0开始
- $(“div:not(.abc)”) 匹配所有div 除去class值为abc的元素
内容选择器
- $(“div:has§”) 匹配所有包含p标签的div
- $(“div:empty”) 匹配不包含内容的div
- $(“div:parent”) 匹配包含内容的div
- $(“div:contains(‘abc’)”) 匹配包含文本abc的div元素
可见选择器
- $(“div:hidden”) 匹配所有隐藏的div元素
- $(“div:visible”) 匹配所有显示的div元素
显示相关的函数
- $(“div:hidden”).show(); //让隐藏的元素显示
- $(“div:visible”).hide();//让显示的元素隐藏
- $("#id").toggle(); //隐藏显示切换
属性选择器
- $(“div[id]”) 匹配包含id属性的所有div
- $(“div[id=‘d1’]”) 匹配包含id=d1的所有div
- $(“div[id!=‘d1’]”) 匹配包含id不等于d1的所有div
子元素选择器
- $(“div:first-child”) 匹配是div并且是子元素并且是第一个
- $(“div:last-child”) 匹配是div并且是子元素并且是最后一个
- $(“div:nth-child(n)”) 匹配是div并且是子元素并且是第n个
表单选择器
- $(":input") 匹配所有的表单中的控件 按钮、文本框、密码框、单选。。。。
- $(":password") 匹配所有的密码框
- $(":radio") 匹配所有单选
- $(":checkbox") 匹配所有多选
- $(":checked") 匹配所有被选中的 单选、多选、下拉选
- $(“input:checked”) 匹配所有被选中的 单选、多选
- $(":selected") 匹配所有下拉选被选中的内容
对页面中元素进行增删改查的操作
- 创建元素
var div = document.createElement(“div”);
var div = $(“abc”); - 添加元素
$("#big").append(div); - 插入元素
兄弟元素.after(div) //兄弟元素的后面
兄弟元素.before(div) //兄弟元素的前面 - 删除元素
$("#abc").remove();//删除id为abc的元素 - 样式
$("#abc").css(“属性名”,“值”);//赋值
$("#abc").css({“属性名1”:“值1”,“属性名2”:“值2”});//赋值
$("#abc").css(“属性名”);//取某个样式的值 - 文本 等效 innerText
$("#abc").text(“文本内容”);//赋值
$("#abc").text();//取值 - 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”);
})