jQuery框架

来源：互联网发布：海信电视看电影软件编辑：程序博客网时间：2024/05/18 01:19

一.jQuery是JavaScript框架——API（jQuery2不支持IE）

二.jQuery选择器：
1.基本选择器
（1）元素选择器：依据标签名定位元素
$("标签名");
（2）类选择器：根据class属性定位元素
$(".class属性名");
（3）id选择器：根据id属性定位元素
$("#id");
（4）选择器组：定位一组选择器所对应的所有元素
$("#id,.importent");

2.层次选择器
（1）在select1元素下，选子孙select2
$("select1 select2")

（2）在select1元素下，选子元素select2
$("select1>select2")

（3）选中select1元素的，选select2的下一个弟弟
$("select1+select2")

（4）选中select1元素的，选select2的所有弟弟
$("select1~select2")

3.过滤选择器
（1）基本过滤选择器
:first——第一个元素，:last——最后一个元素,:not(selector)——除了selector之外
:even——挑选偶数行，:odd——挑选奇数行，:eq(index)——下标等于index的元素,
:gt(index)——下标大于index的元素,:lt(index)——下标小于index的元素,

（2）内容过滤选择器
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或文本的空元素

（3）可见性过滤选择器
:hidden——匹配所有不可见元素
:visible——匹配所有的可见元素

（4）属性过滤选择器
[attribute]——匹配具有attribute属性的元素
[attribute = value]——匹配属性等于value的元素
[attribute != value]——匹配属性不等于value的元素

（5）状态过滤选择器
:enabled——匹配可用的元素
:disabled——匹配不可用的元素
:checked——匹配选中的checkbox
:selected——匹配选中的option

4.表单选择器
:text——匹配文本框，:password——匹配密码框
:radio——匹配单选框，:checkbox——匹配多选框
:submit——匹配提交按钮，:reset——匹配重置按钮
:button——匹配普通按钮，:file——匹配文件框
:hidden——匹配隐藏框

三.jQuery操作DOM
1.读写节点
（1）读写节点内容：html(),text()
（2）读写节点的value属性值：val()
（3）读写节点的属性值：attr()

2.增删节点
var obj = $("节点内容");
parent.append(obj);——最后一个追加
parent.prepend(obj);——第一个追加
brother.after(obj);——兄弟之后追加
brother.before(obj);——兄弟之前追加
obj.remove()——删除节点，obj.remove(selector),obj.empty()——清空节点

3.样式操作
addClass("")——追加样式
removeClass("")——移除指定样式
removeClass()——移除所有样式
toggleClass("")——切换样式
hasClass("")——判断是否有某个样式
css("")——读取css的值
css("","")——设置多个样式

4.遍历节点
children()/children(selector)——直接子节点
next()/next(selector)——下一个兄弟节点
prev()/prev(selector)——上一个兄弟节点
siblings()/siblings(selector)——所有兄弟
find(selector)——查找满足选择器的所有后代
parent()——父节点

四.jQuery事件处理
bind('click',fn)
click(function(e){...})
e.target,e.pageX,e.pageY,e.stopPropagation()——可以取消事件冒泡
hover(mouseenter,mouseleave)——模拟光标悬停事件
toggle()——在多个事件响应中切换
trigger(事件类型),focus();

五.jQuery动画
show()/hide()显示、隐藏的动画效果slow,normal,fast或毫秒数
可以传第二个参数（回调函数）——动画完成之后要执行的函数
slideDown()/slideUp()上下滑动式的动画实现
fadeIn()/fadeOut()淡入淡出式动画效果
animate(偏移位置，执行时间，回调函数)

字体放大案例demo1:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>字体放大案例</title><script src="../js/jquery.js"></script><script>function bigger(){//获取段落默认字号(16px)var size = $("p").css("font-size");//去掉单位，以便于运算size = size.replace("px","");//加1，然后设置给所有段落$("p").css("font-size",++size+"px");}</script></head><body><input type="button" value="+" onclick="bigger();"><p>jQuery是一个优秀的js框架</p><p>它可以极大程度的简化js编程</p><p>它为我们提供了简洁而统一的API</p></body></html>

jQuery对象demo2:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery对象</title><script src="../js/jquery.js"></script><script>function prt(){var ps = $("p");console.log(ps);for(var i=0;i<ps.length;i++){console.log(ps[i].innerHTML);}}function chg(img){console.log(img);var w = $(img).width();if(w==250){$(img).width(218).height(218);}else{$(img).width(250).height(250);}}</script></head><body><input type="button" value="打印" onclick="prt();"><p>jQuery对象本质上就是DOM数组</p><p>jQuery对象才能调用jQuery方法</p><p>DOM对象才能调用DOM方法</p><div><img src="../images/01.jpg" onclick="chg(this);"><img src="../images/02.jpg" onclick="chg(this);"><img src="../images/03.jpg" onclick="chg(this);"></div></body></html>

选择器demo3:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>选择器</title><script src="../js/jquery.js"></script><script>//在页面加载后调用匿名函数，//其作用等同于window.onload$(function(){//1.基本选择器//2.层次选择器console.log($("#gz+li"));//3.过滤选择器//1）基本过滤选择器console.log($("li:first"));console.log($("li:lt(2)"));console.log($("li:odd"));console.log($("li:not(#gz)"));//2）内容过滤选择器console.log($("li:contains('州')"));//3）可见性过滤选择器console.log($("li:hidden"));//4）属性过滤选择器console.log($("li[style]"));//5）状态过滤选择器console.log($("input:disabled"));//4.表单选择器console.log($(":radio"));});</script></head><body><ul><li>北京</li><li>上海</li><li id="gz">广州</li><li>深圳</li><li>杭州</li><li style="display:none;">东莞</li><li style="display:none;">澳门</li></ul><!-- readonly:只读，若框内有值依然可以提交到服务器。disabled:禁用，若框内有值则无法提交到服务器。 --><p>账号:<input type="text"></p><p>密码:<input type="password"></p><p>性别:<input type="radio" name="sex">男<input type="radio" name="sex">女</p></body></html>

读写节点demo4:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>读写节点</title><script src="../js/jquery.js"></script><script>$(function(){//html() == innerHTMLconsole.log($("p:eq(0)").html());$("p:eq(0)").html("jQuery支持<u>读写</u>节点");//text() == innerTextconsole.log($("p:eq(1)").text());$("p:eq(1)").text("jQuery支持<u>增删</u>节点");//val()==valueconsole.log($(":button:first").val("BBB"));//attr()==getAttribute(),setAttribute()console.log($("img:first").attr("src"));$("img:first").attr("src","../images/02.jpg");});</script></head><body><p>jQuery支持<b>读写</b>节点</p><p>jQuery支持<b>增删</b>节点</p><p><input type="button" value="AAA"></p><p><img src="../images/01.jpg"></p></body></html>

增删节点demo5:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>增删节点</title><script src="../js/jquery.js"></script><script>function f1(){var li = $("<li>天津</li>");$("ul").append(li);}function f2(){var li = $("<li>济南</li>");$("#gz").before(li);}function f3(){$("li:last").remove();}</script></head><body><p><input type="button" value="追加" onclick="f1();"><input type="button" value="插入" onclick="f2();"><input type="button" value="删除" onclick="f3();"></p><ul><li>北京</li><li>上海</li><li id="gz">广州</li><li>深圳</li><li>杭州</li></ul></body></html>

样式操作demo6:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>样式操作</title><style>.big{font-size: 30px;}.important{color: red;}</style><script src="../js/jquery.js"></script><script>$(function(){$('p').addClass('big').addClass('important');$('p').removeClass('big').removeClass('important');console.log($('p').hasClass('big'));setInterval(function(){$("p").toggleClass("big");},500);});</script></head><body><p>jQuery对样式操作提供了很好的支持</p></body></html>

遍历节点demo7:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>遍历节点</title><script src="../js/jquery.js"></script><script>$(function(){console.log($("#gz").parent());console.log($("#city").children());console.log($("#gz").next());console.log($("#gz").siblings());});</script></head><body><ul id="city"><li>北京</li><li>上海</li><li id="gz">广州</li><li>深圳</li><li>杭州</li></ul></body></html>

jQuery事件demo8:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery事件</title><script src="../js/jquery.js"></script><script>//页面加载后$(function(){//给按钮1绑定单击事件$(":button:first").click(function(e){console.log(1);console.log(e);});});</script></head><body><input type="button" value="按钮1"></body></html>

合成事件demo9:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>合成事件</title><style>.big{width: 250px;height: 250px;}</style><script src="../js/jquery.js"></script><script>$(function(){//给图片绑定悬停事件$("img").hover(function(){//css("width","250px");//attr("style","width:250px;")//width(250)$(this).toggleClass("big");},//悬停时function(){$(this).toggleClass("big");}//离开时);setInterval(function(){$("img").toggle();},500);});</script></head><body><img src="../images/01.jpg"></body></html>

模拟事件demo10:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>模拟事件</title><style>#gg{height: 500px;background-color: orange;}#gg input{float: right;margin: 5px;}</style><script src="../js/jquery.js"></script><script>$(function(){//给按钮定义单击事件$("#gg :button").click(function(){$("#gg").slideUp(500);});//3秒后setTimeout(function(){$("#gg :button").trigger("click");},3000);});</script></head><body><div id="gg"><input type="button" value="x"></div></body></html>

动画demo11:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>动画</title><style>div{width: 200px;height: 200px;background-color: red;margin-top: 20px;/*自定义动画基于相对/绝对/固定定位*/position: relative;}</style><script src="../js/jquery.js"></script><script>function f1(){$("div").show(1000);}function f2(){//参数2是在动画完成后被调用的。//像参数2这样的，传递给某方法的函数，//并且函数是在方法结束前调用的，//则这样的函数叫回调函数。$("div").hide(3000,function(){console.log("完成");});//显示隐藏的动画实现原理：//通过定时器，连续不断的修改元素的样式。//而启动定时器相当于启动子线程，//当前方法f2相当于主线程，二者并发执行。console.log("over");}$(function(){$("div").hover(function(){$(this).animate({"left":"30px"},500);},function(){$(this).animate({"left":0},500);},);});</script></head><body><input type="button" value="显示" onclick="f1();"><input type="button" value="隐藏" onclick="f2();"><div></div></body></html>

阅读全文

0 0