jQuery是一个JavaScript的函数库是一个JavaScript的框架，是对JavaScript的一种封装 。
极大的简化了JavaScript编程。
在使用jQuery之前你必须要先导入jQuery库，并向添加到你的页面中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>注意：<script> 标签应该位于页面的<head> 部分。
下载jQuery
想玩一玩的话可以从 jQuery.com 下载。
接下来进入学习
一. 基础知识
-
加载文档
为了将代码分离，防止在完全加载之前就运行了jQuery代码，有以下两种方式
$(function(){ }); 或 $(document).ready(function(){ }); -
通过 id 获取元素
通过
$("#id")就可以获取document.getElementById("id"); // 获取的是元素节点 $(#id) //获取的是jquery对象 -
隐藏与显示
取到div对象后，可以调用内置的hide()和show()方法
-
hide()为隐藏
-
show()为显示
//隐藏 $(function(){ $("#btn1").click(function(){ $("#div1").hide(); }); //显示 $("#btn2").click(function(){ $("#div1").show(); }); }) -
-
增加监听器
JavaScript需要在html元素上增加监听事件，而JQuery不需要在html元素上进行操作，故维护更方便
$("#btn").click(function(){ alert(“点击事件”); });
-
取值通过val()方法获取值
$("#test").val(); //取值方式 相当于 JS 里的document.getElementById(“test”).value; -
获取元素内容
-
html():获取元素内容，如果有子元素，保留子元素标签
-
text():获取元素内容，如果有子元素，不保留子元素标签
$("#id").html(); //返回:div里的内容span里的内容 $("#id").text(); //返回：div里的内容span里的内容 -
二. 选择器
-
元素选择器
$("tagName") //选择所有该标签的元素 -
id选择器
$("#d") //根据id选择元素，id是唯一的，如果id重复则只会选择第一个 -
类选择器
$(".className") //根据class选择元素，选择所有className相同的元素 -
层级选择器
$("selector1 selector2") //选择selector1下的selector2元素 $("div span") //选择所有div元素里面的span元素 -
最先、最后选择器
$("selector:first") //选择满足选择器条件的第一个元素 $("selector:last") //选择满足选择器条件的最后一个元素 例： $(".test:first") -
奇偶选择器
$("selector:odd") //选择满足选择器条件的奇数元素 $("selector:even") //选择满足选择器条件的偶数元素 注：因为是基零的，所以第一个的下标其实是0(偶数) 例： $(".test:odd") -
可见性选择器
$("selector:hidden") // 选择满足选择器条件的不可见元素 $("selector:visible") // 选择满足选择器条件的可见元素 注：div:visible和div // visible(有空格)是不同的 div:visible表示选择可见的div div :visible(有空格)表示选择div下可见的元素 例： $(“div:visible”) -
属性选择器
$(selector[attribute]) //满足选择器条件且有某属性的元素 $("div[id]") $(selector[attribute=value]) // 满足选择器条件的属性等于value的元素("div[id='t']") 注：一般不使用[class=className]而应该使用.className,如("div[id= 't']") 注：一般不使用[class=className]而应该使用.className,如("div.test") $(selector[attribute!=value]) //满足选择器条件的属性不等于value的元素 $(selector[attribute^=value]) //满足选择器条件的属性以value开头的元素 $(selector[attribute(selector[attribute=value]) // 满足选择器条件的属性以value结尾的元素 $(selector[attribute*=value]) // 满足选择器条件的属性包含value的元素 -
表单对象选择器
表单对象选择器指的是选中form下会出现的输入元素 :input //会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button :button //会选择type=button的input元素和button元素 :radio //会选择单选框 :checkbox //会选择复选框 :text //会选择文本框，但是不会选择文本域 :submit //会选择提交按钮 :image //会选择图片型提交按钮 :reset //会选择重置按钮 -
表单对象属性选择器
:enabled //会选择可用的输入元素 注：输入元素的默认状态都是可用 :disabled //会选择不可用的输入元素 :checked //会选择被选中的单选框和复选框 注:checked在部分浏览器上(火狐,chrome)也可以选中selected的option :selected //会选择被选中的option元素 -
当前元素选择器
$(this) //即表示触发该事件的组件
三. 操作CSS
-
增加class
通过addClass() 增加一个样式中的class
例：
<script> $(function(){ $("#b1").click(function(){ $("#d").addClass("pink"); //添加样式 }); }); </script> <button id="b1">增加背景色</button> //创建pink样式 <style> .pink{ background-color:pink; } </style> -
删除class
removeClass() // 删除一个样式中的class //操作同addClass() -
切换class
toggleClass() // 切换一个样式中的class //操作同addClass() 若存在，就删除;若不存在，就添加 -
css函数
通过css函数直接设置样式
css("样式属性":"样式值","样式属性":"样式值") $("#d").css("background-color":"black","color":"green"); 注：属性和值都要用引号"包含起来
四. 筛选器
筛选器指的是在已经通过选择器选中元素后，在此基础上进一步选择。
-
筛选第一个、最后一个、第几个
首先通过$("div")选择多个div元素，接下来进一步筛选 first() //第一个元素 last() //最后一个元素 eq(num) //第num个元素 注: num基0 $("div").first() -
筛选父、祖先
parent() //选取最近的一个父元素 parents() //选取所有的祖先元素 例： $("#div1").parent() -
筛选儿子和后代
children() //筛选出紧挨着的儿子元素,隔着的无效 find(selector) //筛选出后代元素 注：find必须使用参数seletor 例： $("#div1").find(“span”) -
筛选同级
siblings() //筛选出同级(同胞)元素 $("#div1").siblings()
五. 属性
-
获取属性
attr("属性名") 通过attr()获取一个元素的属性 例： $("#test").attr("align") //获取id为test的元素的align属性 -
修改属性
attr("属性名","属性值") 将属性名为"属性名"的属性值修改为"属性值" -
删除属性
removeAttr("属性名") 删除属性名为"属性名"的属性 -
prop与attr的区别
与prop一样attr也可以用来获取与设置元素的属性。区别在于，对于自定义属性和选中属性的处理。 选中属性指的是 checked,selected 这2种属性。 -
对于自定义属性 attr能够获取，prop不能获取
-
对于选中属性
attr //只能获取初始值， 无论是否变化 prop //能够访问变化后的值，并且以true|false的布尔型返回。所以在访问表单对象属性的时候，应该采用prop而非attr
六. 效果
-
显示 隐藏 切换
show() //显示 hidden() //隐藏 toggle() //切换 注：也可以加入毫秒数，表示延时操作 例：$("#test").toggle(1000) -
向上滑动 向下滑动 滑动切换
slideUp() //向上滑动(相当于向上隐藏) slideDown() //向下滑动(相当于向下显示) slideToggle() //滑动切换(相当于上下切换) 注：使用方法同上 -
淡入 淡出 淡入淡出切换 改变透明度
fadeIn() //淡入 fadeOut() //淡出 fadeToggle() //淡入淡出切换 fadeTo("改变速率",透明程度) 改变透明度 速率="fast" or "slow" 透明程度=0~1 例： $("#test").fadeTo("slow",0.5); //将id为test的元素的透明程度改为50% $("#test").fadeToggle(1000); -
自定义动画效果
animate({css样式},延时秒数) 注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。 例： $("#test").click(function(){ div.animate({left:'100px',top:'50px'},1000); //向右下移动 }); -
回调函数
效果方法都提供对回调函数的callback()的支持。在调用效果方法的最后一个参数传入一个function,当效果结束的时候，就会自动调用该function了。 例： div.animate({left:'100px',top:'50px'},1000,function(){alert("动画演示结束");});
七. 事件
-
加载
$(document).ready() //页面加载 $() //页面加载 load() //图片加载 $("#test").load(function(){}) -
点击
click() //表示单击 dblclick() //表示双击 注：空白键和回车键也可以造成单击事件，但只有双击鼠标才能造成dblclick事件 -
键盘
keydown //表示按下按键 keypress //表示按下按键 keyup //表示键盘弹起 三者之间的区别： 先后顺序：keydown - keypress - keyup 键盘按键值： 通过event对象的which属性获取键盘的值 如： $("#kt").keyup(function(e){$("#test").html(e.which);})}) keydown和keyup可以获取按键，不能识别大小写 keypress可以识别大小写，不能获取功能键，如F1和shift等 *文本取值：keydown和keypress不能获取输入的最后一个字符，keyup可以获取输入的所有字符 -
鼠标
mousedown //表示鼠标按下 mouseup //表示鼠标弹起 mousemove //表示鼠标进入元素，每移动一下都会被调用 mouseenter //只在鼠标进入元素时调用一次，在其中移动不调用，经过其子元素不调用 mouseover //只在鼠标进入元素时调用一次，在其中移动不调用，经过其子元素调用 mouseleave //只在鼠标离开元素时调用一次，经过其子元素不调用 mouseout //只在鼠标离开元素时调用一次，经过其子元素调用 -
焦点
focus() //获取焦点 blur() //失去焦点 -
改变
change() //内容改变 注：对于文本框而言，只有当该文本失去焦点的时候，才会触发change事件 -
提交
submit() //提交form表单 -
绑定事件
$(“selector”).on(“event”,function); 以上所有的事件处理，都可以通过on()绑定事件来处理 例: $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); }); -
触发事件
文档加载好后，就触发事件 $(“selector”).trigger(“event”); 例： $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); $("#b").trigger("dblclick"); //文档加载好之后就触发dblclick事件 });
八. 操作数组
-
遍历数组
$.each(数组名,function(i,n)) 第一个参数是数组名，第二个参数回调函数，i是下标，n是内容 var a = new Array(1,2,3); $.each(a,function(i,n){ document.write(“a[”+i"]="+n); }) -
去处数组重复值
$.unique(数组名) 注：执行unique之前，要先调用sort对数组内容进行排序 -
判断是否存在某值
$.inArray(值,数组名) 如果存在就返回该值在数组中的位置，否则返回-
九. 操作字符串
-
去除首尾空白
$.trim(字符串) 例： var a = " hello jquery "; $.trim(a); var b = " how are you "; $.trim(b);
十. 对象转换
JOuery对象具有DOM对象不具备的方法
DOM对象也具备JQuery对象没有的属性和方法
故需要对两者进行相互转换
-
JQuery转DOM
通过get(0)或者[0]把JQuery对象转化为DOM对象 var a = $("#test"); //JQuery对象 var b = a[0]; //DOM对象 -
DOM转JQuery
通过$()把DOM对象转换为JQuery对象 var a = document.getElementById(“test”); //DOM对象 var b = $(a); //JQuery对象
基本上jQuery的简单学习与应用就是这些了，希望对你有所帮助
欢迎关注博主···
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
