发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
jQuery:轻量及的javaScript库jQiery向页面添加jQuery库:<script type="text/javascript" src="jQuery.js"></script>jQiery语法:基础语法是:$(selector).action()文档就绪函数:$(document).ready(function(){--- jQuery functions go here ----});
一 jQiery选择器
1 元素选择器:$("p") 选取 <p> 元素。$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
2 属性选择器:$("[href]") 选取所有带有 href 属性的元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。3 CSS选择器:$("p").css("background-color","red");把所有 p 元素的背景颜色更改为红色4 更多选择器$(this)当前 HTML 元素$("p")所有 <p> 元素$("p.intro")所有 class="intro" 的 <p> 元素$(".intro")所有 class="intro" 的元素$("#intro")id="intro" 的元素$("ul li:first")每个 <ul> 的第一个 <li> 元素$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素二 jQiery事件函数$(document).ready(function)将函数绑定到文档的就绪事件(当文档完成加载时)$(selector).click(function)触发或将函数绑定到被选元素的点击事件$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件例子:<script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide();});});</script>三 jQuery效果语法: $(selector).anction(speed,callback);jQuery隐藏和显示hide() 隐藏 show 显示 toggle()隐藏和显示切换 (其中这三个函数可带速度和回调函数参数)jQuery淡入淡出(入:进入浏览器,出:出去流览器)fadeIn() 淡入 fadeOut 淡出 fadeToggle()淡入淡出切换 fadeTo() 淡的透明度to(0--1)$("#div3").fadeIn(3000);$("#div2").fadeOut("slow");$("#div3").fadeToggle(3000);$("#div3").fadeTo("slow",0.7);jQuery 滑动效果slideDown() 向下滑动 slideUp() 向上滑动 slideToggle()向上向下滑动切换四 jQuery 动画语法: $(selector).animate({params},speed,callback);例子$("button").click(function(){var div=$("div");div.animate({left:'100px'},"slow");div.animate({fontSize:'3em'},"slow");});jQuery stop() 方法用于在动画或效果完成前对它们进行停止$(selector).stop(stopAll,goToEnd);Callback 函数在当前动画 100% 完成之后执行语法:$(selector).hide(speed,callback)$("p").hide(1000,function(){alert("The paragraph is now hidden");});Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)$("#p1").css("color","red").slideUp(2000).slideDown(2000);五 获得Html内容和属性text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值attr() 方法用于获取属性值。例子 $("#test").text(); $("#test").html() ;$("#test").val();$("#w3s").attr("href")设置Html内容和属性$("#test").text("hello"); $("#test").html("<h1>hello</h1>") ;$("#test").val(hello");$("#w3s").attr("href","http://www.baidu.com")通过回调函数$("#test1").text(function(i,origText){return "Old text: " + origText + " New text: Hello world!(index: " + i + ")";});六 添加新的 HTML 内容append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容$("p").prepend("Some prepended text.");七 删除已有的 HTML 元素remove() - 删除被选元素(及其子元素)empty() - 从被选元素中删除子元素八 操作cssaddClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性$("p").css("background-color") 返回css属性值$("p").css("background-color","yellow") 设置css属性$("p").css({"background-color":"yellow","font-size":"200%"}) 设置多个css九 尺寸方法width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)innerWidth() 方法返回元素的宽度(包括内边距)innerHeight() 方法返回元素的高度(包括内边距)outerWidth() 方法返回元素的宽度(包括内边距和边框)outerHeight() 方法返回元素的高度(包括内边距和边框)$(document).height() 返回文档(HTML 文档)的宽度和高度$(window).height() 返回窗口(浏览器视口)的宽度和高度十 jQuery遍历parent() 方法返回被选元素的直接父元素 $("span").parent()parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)children() 方法返回被选元素的所有直接子元素find() 方法返回被选元素的后代元素的指定元素 $("div").find("span") $("div").find("*") 表示div后的所有元素siblings() 方法返回被选元素的所有同胞元素 $("h2").siblings() h1 h2 h3 都会被找到next() 方法返回被选元素的下一个同胞元素first() 方法返回被选元素的首个元素last() 方法返回被选元素的最后一个元素eq() 方法返回被选元素中带有指定索引号的元素 $("p").eq(1)filter() not() 方法返回匹配标准的所有元素 $("p").filter(".intro")not() 方法返回不匹配标准的所有元素。十一 Ajax1: load() 方法从服务器加载数据,并把返回的数据放入被选元素中语法:$(selector).load(URL,data,callback)例子$("button").click(function(){$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){if(statusTxt=="success")alert("外部内容加载成功!");if(statusTxt=="error")alert("Error: "+xhr.status+": "+xhr.statusText);});});2: $.get() 方法通过 HTTP GET 请求从服务器上请求数据语法:$.get(URL,callback)例子$("button").click(function(){$.get("demo_test.asp",function(data,status){alert("Data: " + data + "\nStatus: " + status);});});3: $.post(URL,data,callback) 方法通过 HTTP POST 请求从服务器上请求数据并发送数据。语法:$.post(URL,data,callback)例子$("button").click(function(){$.post("demo_test_post.asp",{name:"Donald Duck",city:"Duckburg"},function(data,status){alert("Data: " + data + "\nStatus: " + status);});});对应的asp文件<%dim fname,cityfname=Request.Form("name")city=Request.Form("city")Response.Write("Dear " & fname & ". ")Response.Write("Hope you live well in " & city & ".")%>
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
JQuery 选择器、过滤器介绍
三、JQuery选择器 选择器是JQuery的根基,在JQuery 中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class ...
jQuery基础
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">$(...
jQuery() 方法
jQuery() 方法jQuery 核心 - jQuery() 方法。该函数允许我们通过使用以其他方式找到的 DOM 元素来创建 jQuery 对象。由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素,因此在对其调用 jQ...
jQuery 选择器
jQuery 选择器。jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 元素选择器。jQuery 使用 CSS 选择器来选...
JQuery简单学习(3)——JQuery选择器
选择器允许您对元素组或单个元素进行操作。$(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 class="intro" 的 <p> 元素 $(".intro...
jQuery - prepend() 方法
jQuery - prepend() 方法实例。prepend("<b>Hello world!</b>");prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。提示:prepend() 和 prependTo() 方法作用相同。差...
二. JQuery中的DOM操作
//获取<ul>节点中第2个<li>元素节点var $two_li = $("ul li:eq(2)"); //获取<ul>节点中第3个<li>元素节点$two_li.insertBefore($one_li); //移动节点</script...
jQuery学习基础知识小结
jquery 选择器(name,属性,元素)大全
(id选择器返单个元素)$("form input") 选择所有的form元素中的input元素 $("#main >*") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的...
微信扫码,在手机上查看选中内容