jquery介绍
jquery最大的价值就是兼容性好
主要使用于pc端
查看网站是否使用jquery
window.$
获取网站所使用的jquery的版本
window.$.fn.jquery
jquery的入口函数
$( function () {} ) 等同于 js的window.onload = function () {}
jquery的事件类型
$("div").click( function (){} ) 点击
$("div").hide(1000) 隐藏 参数 - 隐藏的时间
$("div").show( 1000 ) 显示
$("div").mouseover() 鼠标移入
$("div").mouseout() 鼠标移出
$("div").hover(function(){} , function (){}) 代表着移入与移出 - 第一个函数代表移入 第二个代表移出
jquery选择器
1 $("div") 属性选择器
2 $(".div") 类选择器
3 $("#div") id选择器
4 $("div:eq(0)") 伪类选择器 - 索引
4.1 $("li:even") 伪类选择器 - 偶数
5 $('[type="button"]')
6 $(":disabled") 获取到被禁用的元素
7 $(".father .son") 获取到子元素.son
7.1 $(".father").children(".son") 取到子元素.son
8 $(".btn1,.btn2") 并集选择器 同时获取到两个元素
jquery的属性方法
控制(修改)css的样式 - 以传入一个{}大括号对象的形式作为参数 里面的属性值为 键值对 就可修改多个属性值
$("div").css( { width:200, height: 200, backgroundColor: "pink" } )
获取目标元素的某一个值 并且弹出 - 如果只传入一个属性值 就是获取该属性的值
var width = $("div").css( "width" );
alert( width );
添加css类 - 添加的css类 不需要添加. 或者# 并且可以添加多个类 只要空格隔开就行
$("div").addClass("box");
移除css类
$("div").removeClass("box");
检测是否添加了css类 - 有则返回true 没有则返回false
$("div").hasClass("box");
切换css类 - 原理：添加类 / 移除类 - 可同时添加多个类或移除多个类
$("div").toggleClass("box");
.eq(索引值) 索引 - 获取到索引为几的元素
$("div").eq(0).addClass("box"); 当有两个div时 只给第一个div添加box样式
$(this)代表当前
.siblings()选中兄弟元素 使用siblings实现jq排他效果
<body>
(button{$})*5 添加5个button元素
</body>
jq入口函数
$(function () {
注册事件
$("button").click(function (){
$(this) 代表当前
$(this).css( {backgroundColor: "pink"} );
.siblings() 只会选中兄弟元素
$(this).siblings().css( {backgroundColor: ""} )
})
})
.parent() 父级关系 通过函数形式查找父级
$(this).parent().parent() - 找到当前元素的父级的父级
.parents( "body/html" ) 祖先 - 通过函数的形式查找到祖先 - 需要写入查找的祖先值
.children() 子级 - 通过函数的形式获取子级元素
$("div").children(".son") 当有两个子元素时 可直接输入需要获取的子元素
.index() 索引 - 通过函数的形式获取到索引值
$(this).index(); - 获取当前元素的索引值
网友评论