带你快速进入--Jquery的世界
2016-12-26 09:50
471 查看
博客转移到个人站点:http://www.wangchengmeng.club/2018/02/01/%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8BJquery/
欢迎来吐槽
Jquery的使用
1、引用的两种方式1、直接下载库,导入到你的工程中 2、使用cdn <!--利用百度的CDN 使用Jquery--> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
Jquery的语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。基础语法: $(selector).action() 美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素 $("#test").hide() - 隐藏所有 id="test" 的元素 文档就绪事件 $(document).ready(function(){ // 开始写 jQuery 代码... }); **这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。 简洁的写法: $(function(){ // 开始写 jQuery 代码... });
jQuery 选择器
jQuery 中所有选择器都以美元符号开头:$()
1、元素选择器
jQuery 元素选择器基于元素名选取元素。 在页面中选取所有 <p> 元素: $("p") 实例1:点击button后所有<p>都隐藏 $(document).ready(function(){ $("button")click(function(){ $("p").hide(); }); });
2、ID选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 通过 id 选取元素语法如下: $("#test") 选取 id为text的标签 实例2、点击button,id为test的<p>隐藏 $(document).ready(function(){ $("button").click(function(){ $("p#test").hide(); }); });
3、.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。 语法如下: $(".test") 实例3:点击button隐藏class为test的<p> $(document).ready(function(){ $("button").click(function(){ $("p.test").hide(); }); });
4.更多语法:
$("*") 选取所有元素 $(this) 选取当前 HTML 元素 $("p:first") 选取第一个 <p> 元素 $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 $("[href]") 选取带有 href 属性的元素 在线实例 $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 $("tr:even") 选取偶数位置的 <tr> 元素 $("tr:odd") 选取奇数位置的 <tr> 元素
jQuery 事件
1、什么是事件?页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
2、jQuery 事件方法语法
1、点击事件 click() $("button").click(function(){ //操作 }); 2、双击事件 dblclick() $("button").dblclick(function(){ $(this).hide(); }); //双击button隐藏button 3、鼠标进入 mouseenter() $("p#pi").mouseenter(function(){ //鼠标移动到了<p>id为pi上 }); 4、鼠标离开 mouseleave() $("p.pi").mouseleave(function(){ //鼠标离开了<p>class为pi的标签 }); 5、按下鼠标 mousedown() $("p : first").mousedown(function(){ //鼠标在第一个<p>标签按下了 }); 6、松开鼠标 mouseup() $("p").mouseup(function(){ //鼠标松开了 }); *7、鼠标经过 hover() $("p").hover(function(){ //鼠标进入 },function(){ //鼠标离开 }); 8、获得焦点 focus() $("input").focus(function(){ //获得了焦点 }); 9、失去焦点 blur() $("input").blur(function(){ //失去焦点 });
3、jQuery 效果
1、jQuery 效果 - 显示和隐藏 $(function(){ $("button#hide").click(function () { $("p.hide_show").hide(); }); $("button#show").click(function () { $("p.hide_show").show(); }); }); 显示和隐藏 设置时间 和回调函数 $(function(){ $("button#hide").click(function () { $("p.hide_show").hide(2000,function () { alert("已经隐藏"); }); }); $("button#show").click(function () { $("p.hide_show").show(3000,function () { alert("显示完毕"); }); }); }); toggle() 切换hide() show() //toggle 函数 切换 hide() show() $(function () { $("button#toggle").click(function(){ $("p.hide_show").toggle(3000,function(){ alert("执行完毕的回调"); }); }); }); 2、jQuery 效果 - 淡入淡出 //淡入淡出的效果 $(function () { $("button#fade_out").click(function () { $("div#fade_1").fadeOut(); $("div#fade_2").fadeOut("slow"); $("div#fade_3").fadeOut(2000,function () { alert("fadeOut完毕"); }); }); }); $(function () { $("button#fade_in").click(function(){ $("div#fade_3").fadeIn(); $("div#fade_2").fadeIn("slow"); $("div#fade_1").fadeIn(2000,function () { alert("fadeIn完毕"); }); }); }); fadeToggle() 切换 fadeIn() fadeOut() $(function () { $("button#fade_toggle").click(function () { $("div#fade_1").fadeToggle(); $("div#fade_2").fadeToggle(); $("div#fade_3").fadeToggle(); }); }); fadeTo() 指定淡入的透明度 $(function () { $("button#fade_to").click(function(){ $("div#fade_3").fadeTo("slow",0.15); $("div#fade_2").fadeTo("slow",0.5); $("div#fade_1").fadeTo("slow",0.8); }); }); 3、jQuery 效果 - 滑动 //滑动 $(document).ready(function () { $("div#flip_down").click(function(){ $("div#panel").slideDown("slow"); }); }); $(document).ready(function () { $("div#flip_up").click(function () { $("div#panel").slideUp("slow"); }); }); //切换 slideDwon() slideUp() $(document).ready(function () { $("div#flip_toggle").click(function () { $("div#panel").slideToggle("slow"); }); });、 4、动画 animate //动画 $(document).ready(function () { $("button#animate").click(function () { $("div#translate").animate({ left:200, width:100, height:200, opacity:0.3 },2000,function () { alert("动画执行完毕"); }); }); }); animate(param,speed,callback); 第一个参数是必须的,通过改变css样式去实现动画效果 第二个参数是执行时间 第三个是执行完毕后的回调函数 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle": 动画队列: //队列动画 依次往下执行 $(document).ready(function () { $("button#animate_queue").click(function () { var div = $("div#translate"); div.animate({ height:300, width:100, opacity:0.3 },"slow"); div.animate({ height:100, width:300, opacity:0.5 },"slow"); div.animate({ height:100, width:100, opacity:1 },"slow"); }); }); 5、jQuery 停止动画 //在动画执行完毕前 停止动画 $(document).ready(function () { $("button#animate_stop").click(function () { $("div#translate").stop(); }); });
4、jQuery - 链(Chaining)
有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。 提示: 这样的话,浏览器就不必多次查找相同的元素。 如需链接一个动作,您只需简单地把该动作追加到之前的动作上。 $("#p1").css("color","red").slideUp(2000).slideDown(2000);
5、jQuery - 获取内容和属性
1、获得内容 - text()、html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 value属性的值 //获取标签内容 $(document).ready(function () { $("button#get_text").click(function () { alert("text==:"+$("p#text").text()); }); }); $(document).ready(function () { $("button#get_html").click(function () { alert("text==:"+$("p#text").html()); }); }); 2、获取属性 jQuery attr() 方法用于获取属性值。 $("button").click(function(){ alert($("#runoob").attr("href")); }); 获取id为rouoop中href属性的值 3、设置内容 - text()、html() 以及 val() //设置内容 $(function () { $("button#set_text").click(function () { $("p#empty_text").text("我是被设置的文本"); }); }); //动态使用标签 $(function () { $("button#set_html").click(function () { $("p#empty_text").html("<b>hello world</b>"); }); }); 4、text()、html() 以及 val() 的回调函数 //回调函数 $(function () { $("button#text_callback").click(function () { $("p#text").text(function (i, originText) { return "origin:" + originText + ";新文本:" + "我是新添加的文本" + i; }); }); }); $(function () { $("button#html-callback").click(function () { $("p#text").text(function (i, originText) { return "origin:" + originText + ";新文本:" + "我是新添加的<b>hello</b>文本" + i; }); }); }); 设置属性: //设置属性 $(document).ready(function () { $("button#set_attr").click(function () { $("a#jump2link").attr("href","https://www.baidu.com"); }); }); 设置多个属性用,好分割开 attr() 的回调函数 $("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });
6、jQuery - 添加元素
append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 append()在尾部添加元素 prepend()在头部添加元素 //添加元素 $(function () { $("button#append_text").click(function () { $("p#text_label").append("<b>在尾部添加的文本</b>"); }); }); $(function () { $("button#append_list").click(function () { $("ol#list").append("<li><b>添加到尾部的列表项</b></li>"); }); }); 添加多个标签 function appendText() { var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 } after() 和 before() 方法 $("img").after("在后面添加文本"); $("img").before("在前面添加文本");
7、jQuery - 删除元素
remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素(不包括备选元素) 删除指定的元素 $("p").remove(".italic"); //删除指定<p>class为italic的元素
8、jQuery - 获取并设置 CSS 类
1、jQuery 操作 CSS addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 1、addClass()给被选的元素添加一个class选择器,可以一次添加多个
2、removeClass()给被选元素删除一个class选择器 $(function () { $("button.remove_class").click(function () { $("h2#add_blue").removeClass("blue"); $("h3#add_red").removeClass("red"); }); }); 3、toggleClass() 切换 addClass() removeClass() $(function () { $("button.toggle_class").click(function () { $("h2,h3").toggleClass("red"); }); }); 4、jQuery css() 方法 //css() $(document).ready(function () { $("button.get_css").click(function () { var css = $("h2#add_blue").css("font-size"); alert("css_属性:"+css); }); }); //设置css属性 $(document).ready(function () { $("button.set_css").click(function () { $("h2#add_blue").css("background-color","red"); }); }); //设置多个css{"":"","":""} $("p").css({"background-color":"yellow","font-size":"200%"});
9、jQuery 尺寸
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。 height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。 innerWidth() 方法返回元素的宽度(包括内边距)。 +左右pandding innerHeight() 方法返回元素的高度(包括内边距)。 +上下padding outerWidth() 方法返回元素的宽度(包括内边距和边框)。 +左右padding+border outerHeight() 方法返回元素的高度(包括内边距和边框)。 +上下padding+border //使用width() height() 测量元素的宽高、 $(document).ready(function () { $("button#measure_size").click(function () { var txt = ""; txt+= "width:"+$("div#measure").width()+"</br>"; txt+= "height:"+$("div#measure").height()+"</br>"; txt+="inner_width:"+$("div#measure").innerWidth()+"</br>"; txt+="inner_height:"+$("div#measure").innerHeight()+"</br>"; txt+="out_width:"+$("div#measure").outerWidth()+"</br>"; txt+="out_height:"+$("div#measure").outerHeight(); $("div#measure").html(txt); }); });
10、jQuery 遍历
它们用于向上遍历 DOM 树: parent() 被选元素 上一级父元素 parents() 被选元素 所有的上级元素 parents("指定元素") 被选元素指定的上级元素 parentsUntil("指定元素") 被选元素和指定元素之间的父元素 //遍历上级标签 $(document).ready(function () { $("span.child").parents("div.grad_parent").css({ "border":"1 solid red", "background":"blue" }); $("span.child").parentsUntil("div.parent").css({ "background":"red" }); }); 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() children() 方法返回被选元素的所有 直接 子元素。 $(document).ready(function(){ $("div").children("p.1"); //过滤div直接子元素,返回<p>class属性为1的元素 }); find() 方法返回被选元素的 后代 元素,一路向下 直到 最后一个后代。 $(document).ready(function(){ $("div").find("span"); //返回div元素下所有的span子元素 }); $(document).ready(function(){ $("div").find("*"); //返回div元素下所有的子元素 }); jQuery 遍历 - 同胞(siblings) 在 DOM 树进行水平遍历: siblings() 返回被选元素的所有同胞(拥有同一个父亲)元素。 siblings("p")过滤 next() 返回被选元素的下一个同胞元素。 nextAll() 返回被选元素的所有跟随的同胞元素。 nextUntil() 回介于两个给定参数之间的所有跟随的同胞元素 $(document).ready(function(){ $("h2").nextUntil("h6"); //h2 -- h6 之间 }); //下面与next相反 prev() prevAll() prevUntil() first() 方法返回被选元素的首个元素。 $(document).ready(function(){ $("div p").first(); //返回收个 div+p元素 }); last() 方法返回被选元素的最后一个元素。 eq() 方法返回被选元素中带有指定索引号的元素。 索引从0开始 $(document).ready(function(){ $("p").eq(1); //返回索引为1的p元素 也就是第二个 }); filter() 匹配的元素会被返回。 $(document).ready(function(){ $("p").filter(".url"); //返回p元素中 class为url的所有元素 }); not() 方法返回不匹配标准的所有元素。 与filter相反
11、jQuery - AJAX
1、jQuery - AJAX load() 方法 语法: $(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL。 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。 可选的 callback 参数是 load() 方法完成后所执行的函数名称。 $("div#ajax").load("aaa.txt"); $("div#ajax").load("aaa.txt #p1"); //加载aaa.txt文档中 id为p1的标签到被选中元素 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数: responseTxt - 包含调用成功时返回的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象
2、jQuery - AJAX get() 和 post() 方法 jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。 POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。 GET POST区别
get()方法:通过 HTTP GET 请求从服务器上请求数据。 $.get(URL,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 callback 参数是请求成功后所执行的函数名
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。 $.post(URL,data,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 data 参数规定连同请求发送的数据。 可选的 callback 参数是请求成功后所执行的函数名。
jQuery noConflict() 方法 释放 $ 标识符的控制,这样其他脚本就可以使用它了。 var jq = $.noConflict(); //替换$符号 jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍然在工作!"); }); });
相关文章推荐
- 带你快速进入.net core的世界(转)
- 新手快速进入LINUX世界的点滴思考
- 带你快速进入.net core的世界
- 快速进入Android世界
- 进入jQuery的精彩世界
- 3D编程指南第一部分:快速进入移动JAVA 3D编程世界
- 进入 ASP.NET 世界 - 第 1 部分:应用程序规划与设计(二)
- 3D编程指南第一部分:快速进入移动JAVA 3D编程世界
- 进入Ruby on Rails世界
- 从基本应用实例快速步入XML编程世界
- 工作两年(五)--进入Blog的世界
- 进入Ruby on Rails世界
- 进入 ASP.NET 世界 - 第 2 部分:使用 SQL Server 2000 创建数据存储层
- 必须快速进入具体的编程方式的学习过程中
- 进入net世界
- 进入 ASP.NET 世界 - 第 1 部分:应用程序规划与设计
- [JAVA100例]072、欢迎进入Applet世界
- 工作两年(七)——进入工作的世界
- 工作两年(四)--进入Configuration Management的世界