jQuery

参考菜鸟教程jQuery 教程jQuery 教程 | 菜鸟教程 

目录

引用

jQuery 语法

jQuery 选择器

元素选择器

#id 选择器

.class 选择器

更多实例

jQuery 事件

jQuery 效果- 隐藏和显示

隐藏和显示设置速度

来回切换显示与隐藏

jQuery 效果 - 标签隐藏或显示添加淡入淡出效果 

jQuery 效果 - 元素滑动(显示和隐藏加上滑动效果)

jQuery 效果- 动画-animate() 方法

jQuery animate() - 使用预定义的值

jQuery animate() - 使用队列功能

jQuery 停止动画

jQuery - 链(Chaining)

jQuery - 获取或者内容text/HTML/val和属性attr

上面函数的回调函数

jQuery - 添加HTML元素/内容

添加多个HTML标签

jQuery - 删除HTML元素

过滤被删除的元素

jQuery - 获取并设置 CSS 类

jQuery css() 方法设置或返回被选元素的一个或多个样式属性

jQuery 尺寸

jQuery 遍历 找 祖先

jQuery 遍历 找 后代

jQuery 遍历 找 同胞(siblings)

jQuery 遍历- 过滤

jQuery ajax() 方法

jQuery - AJAX load() 方法

为了避免多页面情形下的代码重复 使用load方法解决

jQuery - AJAX get() 和 post() 方法

GET 和 POST 方法的区别: 

jQuery - noConflict() 方法 释放jQuery对$的控制

jsonp

jQuery 选择器

jQuery 实用工具


​​​​​​​

 

引用

下载后 

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

在线

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

jQuery 语法

基础语法: $(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作

选择符有this当前元素,p元素,p.test 元素下面的test元素,#test id为test的元素

下图选择整个文档,行为是加载好了。 

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

上图也称为入口函数

jQuery 选择器

元素选择器

元素选择器基于元素名选择元素

$("p") 选择全体p标签

#id 选择器

$("#test") 

.class 选择器

$(".test")

更多实例

$("*") 选取全部元素

$("p:first") 选取第一个 <p> 元素

$("ul li:first")  选取第一个 <ul> 元素的第一个 <li> 元素         

$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素

$("[href]")  选取带有 href 属性的元素

$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even") 选取偶数位置的 <tr> 元素

$("tr:odd") 选取奇数位置的 <tr> 元素

jQuery 事件

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

input获得焦点触发

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

input失去焦点时触发

jQuery 效果- 隐藏和显示

hide() 隐藏行为

show() 显示行为 

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

隐藏和显示设置速度

$("button").click(function(){
  $("p").hide(1000);
});

上代码消失的过程有一秒

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

上代码一秒内消失,jQuery自身提供"linear" 和 "swing"缓动函数,这里使用linear,并使用回调函数,也就是相当于一个返回值,当运行到最后就会返回,也就是运行这个函数

来回切换显示与隐藏

$("button").click(function(){
  $("p").toggle();
});

按一下按钮就会执行回调函数,对p标签就会执行toggle函数,也就是由显示变为隐藏,由隐藏变为显示

同样,切换函数同样有特效

$(selector).toggle(speed,callback);

jQuery 效果 - 标签隐藏或显示添加淡入淡出效果 

  • fadeIn() 由隐藏变为显示,会有淡入的效果
  • fadeOut() 由显示变为隐藏,会有淡出的效果
  • fadeToggle()显示和隐藏的开关
  • fadeTo()颜色变淡

以上方法都可以加上时间,提供了"slow"、"fast" 或多少毫秒。.也可以再加上回调函数

$("#div2").fadeOut("slow");

$("#div3").fadeIn(3000);

jQuery 效果 - 元素滑动(显示和隐藏加上滑动效果)

  • slideDown()向下滑动元素,由隐藏变为显示
  • slideUp() 向上滑动元素,由显示变为隐藏
  • slideToggle()上面两个合起来

以上方法都可以加上时间,提供了"slow"、"fast" 或多少毫秒。.也可以再加上回调函数.

$("#panel").slideToggle("slow");

jQuery 效果- 动画-animate() 方法

$("div").animate({left:'250px'}); 向左移动250像素 

默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

生成动画的过程中可同时使用多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

 使用定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

下面比当前高度高150px,宽度宽150px

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQuery animate() - 使用预定义的值

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

toggle是显示或者隐藏变换

jQuery animate() - 使用队列功能

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
 var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");

将变高,变宽,再变窄,再变短

jQuery 停止动画

$("#panel").stop(); 如果上述动画还没完成,将停止动画

jQuery - 链(Chaining)

 $("#p1").css("color","red").slideUp(2000).slideDown(2000);

将会都执行

jQuery - 获取或者内容text/HTML/val和属性attr

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
  • attr() 方法用于获取属性值

$("#test1").text("Hello world!"); 往里加文本,()里面没东西就就是获得内容

$("#test2").html("<b>Hello world!</b>"); 对id为test2 添加内容,()没有内容就是获得内容

$("#runoob").attr("href","http://www.runoob.com/jquery"); 设置属性,可以同时设置多个

$("#runoob").attr({

        "href" : "http://www.runoob.com/jquery",

          "title" : "jQuery 教程" }); //同时设置多个属性

上面函数的回调函数

回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值

$("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; });

jQuery - 添加HTML元素/内容

  • append() - 在被选元素的结尾插入内容 (仍然在该元素的内部)
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

$("p").append("追加文本");

添加多个HTML标签

下面将标签内容变成一个变量,然后到最后的时候添加进去 

function appendText(){
    var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
    var txt2=("<p></p>").text("2");//使jQueryvartxt3=document.createElement("p");txt3.innerHTML="3";//使DOMtextwithDOM("body").append(txt1,txt2,txt3);        // 追加新元素
}

jQuery - 删除HTML元素

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

$("#div1").remove(); 移除id为div1的标签

$("#div1").empty(); 将div1里面的内容置空(也就是删除所有子元素)

过滤被删除的元素

在remove里面加内容,将指定只删除这个

$("p").remove(".italic"); 只删除italic的内容

jQuery - 获取并设置 CSS 类

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类 删除类里面的元素
  • toggleClass() - 对被选元素进行添加/删除类的切换操作

有一个类为

.important {

   font-weight:bold;

   font-size:xx-large;

}     

执行   $("h1,h2,p").addClass("blue"); 将会对h1,h2,p都增加里面两条css样式

因此可以对一些样式包装一个类,然后对元素添加这个类

jQuery css() 方法设置或返回被选元素的一个或多个样式属性

返回属性

$("p").css("background-color");

设置属性

$("p").css("background-color","yellow");

设置多个属性

$("p").css(

 {"background-color":"yellow","font-size":"200%"});

jQuery 尺寸

  • width() 设置或返回元素的宽度    $("#div1").width()
  • height() 设置或返回元素的高度
  • innerWidth()返回元素的宽度(包括内边距)
  • innerHeight()返回元素的高度(包括内边距)
  • outerWidth()返回元素的宽度(包括内边距和边框)
  • outerHeight()返回元素的高度(包括内边距和边框)

jQuery 遍历 找 祖先

  • parent() 返回被选元素的直接父元素
  • parents()返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
  • parentsUntil()返回介于两个给定元素之间的所有祖先元素。

过滤,在()里面加入元素

$("span").parents("ul");返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素

$("span").parentsUntil("div");返回介于 <span> 与 <div> 元素之间的所有祖先元素:

jQuery 遍历 找 后代

  • children() 返回被选元素的所有直接子元素 该方法只会向下一级对 DOM 树进行遍历
  • find()返回被选元素的后代元素,一路向下直到最后一个后代。

$("div").children();返回每个 <div> 元素的所有直接子元素

$("div").find("span");返回属于 <div> 后代的所有 <span> 元素

过滤,在()加入元素

$("div").children("p.1");返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素

jQuery 遍历 找 同胞(siblings)

  • siblings()返回被选元素的所有同胞元素
  • next()返回被选元素的下一个同胞元素
  • nextAll()返回被选元素的所有跟随的同胞元素
  • nextUntil()介于两个给定参数之间的所有跟随的同胞元素
  • prev() 前面的一个同胞
  • prevAll()前面的所有同胞
  • prevUntil()前面介于两个给定参数之间的所有跟随的同胞元素

过滤,在()加入元素

$("h2").siblings("p");返回属于 <h2> 的同胞元素的所有 <p> 元素

$("h2").nextUntil("h6");返回介于 <h2> 与 <h6> 元素之间的所有同胞元素

jQuery 遍历- 过滤

它们允许基于其在一组元素中的位置来选择一个特定的元素。

  • first()返回被选元素的首个元素
  • last() 返回被选元素的最后一个元素
  •  eq()返回被选元素中带有指定索引号的元素
  • filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
  • not() 方法返回不匹配标准的所有元素,not() 方法与 filter() 相反

$("div p").first();     选取首个 <div> 元素内部的第一个 <p> 元素 注意这里加了空格

$("p").eq(1);  索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。此例子选取第二个 <p> 元素(索引号 1)

$("p").filter(".url");返回带有类名 "url" 的所有 <p> 元素:

jQuery ajax() 方法

jQuery ajax() 方法 | 菜鸟教程

jQuery - AJAX load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$("#div1").load("demo_test.txt"); 比如这个将在div1里面加载后台txt文件

 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

为了避免多页面情形下的代码重复 使用load方法解决

//1.当前文件中要插入的地方使用此结构:
<div class="include" file="***.html"></div>

//2.代码:
$(".include").each(function() {
    if (!!$(this).attr("file")) {
        var $includeObj = $(this);
        $(this).load($(this).attr("file"), function(html) {
            $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
        })
    }
});
 //3.***.html中放入内容,用html格式仅仅因为会有编辑器的书写辅助。。 

或者在index文件里只写重复部分,剩下的一股脑放各自单独文件 load() 进来~

jQuery - AJAX get() 和 post() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

 $.post() 方法通过 HTTP POST 请求向服务器提交数据。

$.post(URL,data,callback);

 $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });

GET 和 POST 方法的区别: 

1、发送的数据数量

在 GET 中,只能发送有限数量的数据,因为数据是在 URL 中发送的。

在 POST 中,可以发送大量的数据,因为数据是在正文主体中发送的。

2、安全性

GET 方法发送的数据不受保护,因为数据在 URL 栏中公开,这增加了漏洞和黑客攻击的风险。

POST 方法发送的数据是安全的,因为数据未在 URL 栏中公开,还可以在其中使用多种编码技术,这使其具有弹性。

3、加入书签中

GET 查询的结果可以加入书签中,因为它以 URL 的形式存在;而 POST 查询的结果无法加入书签中。

4、编码

在表单中使用 GET 方法时,数据类型中只接受 ASCII 字符。

在表单提交时,POST 方法不绑定表单数据类型,并允许二进制和 ASCII 字符。

5、可变大小

GET 方法中的可变大小约为 2000 个字符。

POST 方法最多允许 8 Mb 的可变大小。

6、缓存

GET 方法的数据是可缓存的,而 POST 方法的数据是无法缓存的。

7、主要作用

GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。

jQuery - noConflict() 方法 释放jQuery对$的控制

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

仍然可以通过全名替代简写的方式来使用 jQuery

jsonp

【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 - 随它去吧 - 博客园

jQuery 选择器

选择器实例选取
*$("*")所有元素
#id$("#lastname")id="lastname" 的元素
.class$(".intro")class="intro" 的所有元素
.class,.class$(".intro,.demo")class 为 "intro" 或 "demo" 的所有元素
element$("p")所有 <p> 元素
el1,el2,el3$("h1,div,p")所有 <h1>、<div> 和 <p> 元素
:first$("p:first")第一个 <p> 元素
:last$("p:last")最后一个 <p> 元素
:even$("tr:even")所有偶数 <tr> 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。
:odd$("tr:odd")所有奇数 <tr> 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。
:first-child$("p:first-child")属于其父元素的第一个子元素的所有 <p> 元素
:first-of-type$("p:first-of-type")属于其父元素的第一个 <p> 元素的所有 <p> 元素
:last-child$("p:last-child")属于其父元素的最后一个子元素的所有 <p> 元素
:last-of-type$("p:last-of-type")属于其父元素的最后一个 <p> 元素的所有 <p> 元素
:nth-child(n)$("p:nth-child(2)")属于其父元素的第二个子元素的所有 <p> 元素
:nth-last-child(n)$("p:nth-last-child(2)")属于其父元素的第二个子元素的所有 <p> 元素,从最后一个子元素开始计数
:nth-of-type(n)$("p:nth-of-type(2)")属于其父元素的第二个 <p> 元素的所有 <p> 元素
:nth-last-of-type(n)$("p:nth-last-of-type(2)")属于其父元素的第二个 <p> 元素的所有 <p> 元素,从最后一个子元素开始计数
:only-child$("p:only-child")属于其父元素的唯一子元素的所有 <p> 元素
:only-of-type$("p:only-of-type")属于其父元素的特定类型的唯一子元素的所有 <p> 元素
parent > child$("div > p")<div> 元素的直接子元素的所有 <p> 元素
parent descendant$("div p")<div> 元素的后代的所有 <p> 元素
element + next$("div + p")每个 <div> 元素相邻的下一个 <p> 元素
element ~ siblings$("div ~ p")<div> 元素同级的所有 <p> 元素
:eq(index)$("ul li:eq(3)")列表中的第四个元素(index 值从 0 开始)
:gt(no)$("ul li:gt(3)")列举 index 大于 3 的元素
:lt(no)$("ul li:lt(3)")列举 index 小于 3 的元素
:not(selector)$("input:not(:empty)")所有不为空的输入元素
:header$(":header")所有标题元素 <h1>, <h2> ...
:animated$(":animated")所有动画元素
:focus$(":focus")当前具有焦点的元素
:contains(text)$(":contains('Hello')")所有包含文本 "Hello" 的元素
:has(selector)$("div:has(p)")所有包含有 <p> 元素在其内的 <div> 元素
:empty$(":empty")所有空元素
:parent$(":parent")匹配所有含有子元素或者文本的父元素。
:hidden$("p:hidden")所有隐藏的 <p> 元素
:visible$("table:visible")所有可见的表格
:root$(":root")文档的根元素
:lang(language)$("p:lang(de)")所有 lang 属性值为 "de" 的 <p> 元素
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='default.htm']")所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value]$("[href!='default.htm']")所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value]("[href='.jpg']")所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value]$("[title|='Tomorrow']")所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
[attribute^=value]$("[title^='Tom']")所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value]$("[title~='hello']")所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value]$("[title*='hello']")所有带有 title 属性且值包含字符串 "hello" 的元素
[name=value][name2=value2]("input[id][name='man']" )带有 id 属性,并且 name 属性以 man 结尾的输入框
:input$(":input")所有 input 元素
:text$(":text")所有带有 type="text" 的 input 元素
:password$(":password")所有带有 type="password" 的 input 元素
:radio$(":radio")所有带有 type="radio" 的 input 元素
:checkbox$(":checkbox")所有带有 type="checkbox" 的 input 元素
:submit$(":submit")所有带有 type="submit" 的 input 元素
:reset$(":reset")所有带有 type="reset" 的 input 元素
:button$(":button")所有带有 type="button" 的 input 元素
:image$(":image")所有带有 type="image" 的 input 元素
:file$(":file")所有带有 type="file" 的 input 元素
:enabled$(":enabled")所有启用的元素
:disabled$(":disabled")所有禁用的元素
:selected$(":selected")所有选定的下拉列表元素
:checked$(":checked")所有选中的复选框选项
.selector$(selector).selector在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target$( "p:target" )选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素

jQuery 实用工具

方法描述
$.boxModel在版本 1.8 中被废弃。检测浏览器是否使用W3C的CSS盒模型渲染当前页面
$.browser在版本 1.9 中被废弃。返回用户当前使用的浏览器的相关信息
$.contains()判断另一个DOM元素是否是指定DOM元素的后代
$.each()遍历指定的对象和数组
$.extend()将一个或多个对象的内容合并到目标对象
$.fn.extend()为jQuery扩展一个或多个实例属性和方法
$.globalEval()全局性地执行一段JavaScript代码
$.grep()过滤并返回满足指定函数的数组元素
$.inArray()在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1)
$.isArray()判断指定参数是否是一个数组
$.isEmptyObject()检查对象是否为空(不包含任何属性)
$.isFunction()判断指定参数是否是一个函数
$.isNumeric()判断指定参数是否是一个数字值
$.isPlainObject()判断指定参数是否是一个纯粹的对象
$.isWindow()判断指定参数是否是一个窗口
$.isXMLDoc()判断一个DOM节点是否位于XML文档中,或者其本身就是XML文档
$.makeArray()将一个类似数组的对象转换为真正的数组对象
$.map()指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回
$.merge()合并两个数组内容到第一个数组
$.noop()一个空函数
$.now()返回当前时间
$.parseHTML()将HTML字符串解析为对应的DOM节点数组
$.parseJSON()将符合标准格式的JSON字符串转为与之对应的JavaScript对象
$.parseXML()将字符串解析为对应的XML文档
$.trim()去除字符串两端的空白字符
$.type()确定JavaScript内置对象的类型
$.unique()在jQuery 3.0中被弃用。对DOM元素数组进行排序,并移除重复的元素
$.uniqueSort()对DOM元素数组进行排序,并移除重复的元素
$.data()在指定的元素上存取数据,并返回设置值
$.hasData()确定一个元素是否有相关的jQuery数据
$.sub()创建一个新的jQuery副本,其属性和方法可以修改,而不会影响原来的jQuery对象
$.speed创建一个包含一组属性的对象用来定义自定义动画
$.htmlPrefilter()通过jQuery操作方法修改和过滤HTML字符串
$.readyException()处理包裹在jQuery()中函数同步抛出的错误

posted @   贪睡地蜗牛  阅读(60)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示