一.Jquery基础
1.简介
目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装
例如:各行变色
$("tr:even").css("background-color","#e8f0f2");
2.作用
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
3.引入
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
初试
$(document).ready(function() { alert("我欲奔赴沙场征战jQuery,势必攻克之!"); });
window.onload | $(document).ready() | |
---|---|---|
执行时机 | 必须等待网页中所有的内容加载完毕后(包括图片、flash、视频等)才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完 |
编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
简化写法 | 无 | $(function(){ //执行代码}) ; |
4.基本语法
$(selector).action()
5.选择器
基本选择器
名称 | 语法构成 | 描述 | 示例 |
---|---|---|---|
标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
并集选择器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
层次选择器
名称 | 语法构成 | 描述 | 示例 |
---|---|---|---|
后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant(后代)元素 | $("#menu span" )选取#menu下的<span>元素 |
子选择器 | parent>child | 选取parent元素下的child(子)元素 | $(" #menu>span" )选取#menu的子元素<span> |
相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> |
属性选择器
语法构成 | 描述 | 示例 |
---|---|---|
[attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值以en开头的元素 |
[attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 |
[attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* ='txt']" )选取href属性值中含有txt的元素 |
过滤选择器
语法 | 描述 | 示例 |
---|---|---|
:first | 选取第一个元素 | $(" li:first" )**选取所有<li>元素中的第一个<li>元素** |
:last | 选取最后一个元素 | $(" li:last" )**选取所有<li>元素中的最后一个<li>元素** |
:not(selector) | 选取去除所有与给定选择器匹配的元素 | $(" li:not**(.three)" )选取class不是three的元素** |
:even | 选取索引是偶数的所有元素(**index从0开始)** | $(" li:even" )**选取索引是偶数的所有<li>元素** |
:odd | 选取索引是奇数的所有元素(**index从0开始)** | $(" li:odd" )**选取索引是奇数的所有<li>元素** |
语法 | 描述 | 示例 |
---|---|---|
:eq(index) | 选取索引等于**index的元素(index从0开始)** | $("li:eq(1)" )**选取索引等于1的<li>元素** |
:gt(index) | 选取索引大于**index的元素(index从0开始)** | $(" li:gt(1)" )**选取索引大于1的<li>元素(注:大于1,不包括1)** |
:lt(index) | 选取索引小于**index的元素(index从0开始)** | $(“li:lt(1)” )**选取索引小于1的<li>元素(注:小于1,不包括1)** |
:header | 选取所有标题元素,如**h1~h6** | $(":header" )**选取网页中所有标题元素** |
:focus | 选取当前获取焦点的元素 | $(":focus" )**选取当前获取焦点的元素** |
:animated | 选择所有动画 | $(":animated" )**选取当前所有动画元素** |
语法 | 描述 | 示例 |
---|---|---|
:visible | 选取所有可见的元素 | $(":visible" )**选取所有可见的元素** |
:hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
最后两个一般不作为设置样式只做显示或者隐藏的修改
$("p:hidden").show(); $("p:visible").hide();
二.Jquery基础操作
1.样式操作
设置/获取样式
语法
css(name,value) ; 或 css({name:value, name:value,name:value…}) ; 设置属性 css(name)
举例
$(this).css("border","5px solid #f5f5f5"); 或 $(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"}); $(this).css("border");
追加样式
语法
$(selector).addClass(class); 或 $(selector).addClass(class1 class2 … classN);
举例
$("p").addClass("content border");
移除样式
语法
$(selector).removeClass("class") ; 或 $(selector).removeClass("class1 class2 … classN ") ;
举例
$("p").removeClass("text content");
切换样式
语法
$(selector).toggleClass(class) ;
举例
$("p").toggleClass("content border");
判断样式
语法
$(selector). hasClass(class);
举例
$("h2").mouseover(function() { if(!$("p").hasClass("content ")){ $("p").addClass("content "); } });
2.内容及Value值操作
html()
举例
$("div.left").html();//获取 //或 $("div.left").html("<div class='content'>…</div>")//设置
text()
举例
$("div.left").text();//获取 //或 $("div.left").text("<div class='content'>…</div>");//设置
val()
举例
$(this).val();//获取 //或 $(this).val(value);//设置
3.节点及节点属性操作
创建节点
语法
$(selector):通过选择器获取节点 $(element):把DOM节点转化成jQuery节点 $(html):使用HTML字符串创建jQuery节点
举例
var $newNode=$("<li></li>"); var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>"); var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了!</li>");
插入节点
语法
append(content) //$(A).append(B)表示将B追加到A中 appendTo(content) //$(A).appendTo(B)表示把A追加到B中 prepend(content) //$(A). prepend (B)表示将B前置插入到A中 prependTo(content) //$(A). prependTo (B)表示将A前置插入到B中 after(content) insertAfter(content) before(content) insertBefore(content)
举例
$("ul").append($("#dd")); $("#dd").appendTo("ul"); $("ul"). prepend ($("#dd")); $("#dd").prependTo ("ul"); $("ul").after($("#dd")); $("#dd").insertAfter("ul"); $("ul").before($("#dd")); $("#dd").insertBefore("ul");
删除节点
remove():删除整个节点 empty():清空节点内容 detach():删除整个节点,保留元素的绑定事件、附加的数据
举例
$("#dd").remove(); $("#dd").empty(); $("#dd").detach();
替换节点
replaceWith()
replaceAll()
举例
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>"); $(".gameList li:eq(2)").replaceWith($newNode1); $($newNode1).replaceAll(".gameList li:eq(2)");
replaceWith() 与replaceAll() 方法都可以实现元素节点的替换,二者最大的区别在 于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中 所选择的元素。同时,一旦完成替换,被替换元素中的全部事件都将消失
复制节点
语法
$(selector).clone([includeEvents]) ;
举例
$(".gameList li:eq(1)").click(function(){ $(this).clone(true).appendTo(".gameList"); }) $(".gameList li:eq(2)").click(function(){ $(this).clone(false).appendTo(".gameList"); })
参数ture或flase, true复制事件处理,flase时反之
节点遍历
语法
$(selector).children();//遍历子元素 $(selector).next();//遍历同辈之后的 $(selector).prev();//遍历同辈之前的 $(selector).slibings();//遍历同辈前后的 $(selector).parent();//遍历父级 $(selector).parents();//遍历父级和以上的 $(selector).each( );//遍历每一个
4.属性操作
语法
$(selector).attr([name]) ;//获取 //或 $(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置 $(selector).removeAttr(name) ;//删除
举例
$(".contain img").attr({width:"200",height:"80"}) $(".contain img").removeAttr("alt");
三、Jquery事件与特效
1.事件
方法 | 描述 | 执行时机 |
---|---|---|
click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
举例
$(".nav-ul a").mouseover(function(){ $(this).css("background-color","#f01e28"); }); $(".nav-ul a").mouseout(function(){ $(this).css("background-color","#ff2832"); });
方法 | 描述 | 执行时机 |
---|---|---|
keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
举例
$("[type=password]").keyup(function () { $("#events").append("keyup"); }).keydown(function (e) { $("#events").append("keydown"); }).keypress(function () { $("#events").append("keypress"); }); $(document).keydown(function (event) { if (event.keyCode == "13") { alert("确认要提交么?"); } });
2.绑定事件
语法
bind(type,fn);
举例
$(document).ready(function(){ $(".on").bind("mouseover",function(){ $(".topDown").show(); }); });//一个 $(".top-m .on").bind({ mouseover:function(){ $(".topDown").show(); }, mouseout:function(){ $(".topDown").hide(); } });//多个
3.移除事件
语法
unbind([type],[fn])
举例
$("#del").click(function(){ $("#nav li:first").unbind("click", content1) });
4.复合事件
语法
hover(enter,leave)//hover()方法相当于mouseover与mouseout事件的组合 toggle(fn1,fn2,...,fnN);//toggle()方法用于模拟鼠标连续click事件 toggleClass(className);
举例
$(".top-m .on").hover(function(){ $(".topDown").show(); }, function(){ $(".topDown").hide(); } ); $("input").toggle( function(){$("body").css("background","#ff0000");}, function(){$("body").css("background","#00ff00");}, function(){$("body").css("background","#0000ff");} ) //toggle()方法不带参数,与show( )和hide( )方法作用一样 $("input").click(function(){$("p").toggleClass("red");})
5.元素显现与隐藏
语法
$(selector).show([speed],[callback]) //speed:可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast //callback:可选。show函数执行完之后,要执行的函数 $(selector).hide([speed],[callback]) $(selector).fadeIn([speed],[callback]) $(selector).fadeOut([speed],[callback]) $(selector).slideUp ([speed],[callback]) $(selector).slideDown ([speed],[callback]
6.动画
语法
$(selector). animate({params},speed,callback)
举例
$("#d1").animate({top:300},3000); $("#d1").animate({top:300,left:300},3000); $("#d1").animate({top:0,left:300},3000); $("#d1").animate({top:0,left:0},3000);