han_jQuery

最新推荐文章于 2021-04-12 17:09:16 发布
最新推荐文章于 2021-04-12 17:09:16 发布
阅读量313 收藏
点赞数
分类专栏： 前端 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43616155/article/details/106171193
版权

jQuery

  • 什么是jQuery
    1. 是一个JavaScript函数库
    2. 是一个轻量级的“写得少，做的多的”JavaScript
    3. 其功能包括有：
    - HTML 元素选取
    - HTML元素操作
    - CSS操作
    - HTML事件函数
    - JavaScript特效和动画
    - AJAX
    - Utilities
    - 还有部分插件
  • jQuery使用方式
    1. 从 jquery.com 下载 jQuery 库
    2. 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

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

从 CDN 中载入
1.Staticfile CDN:
<head>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
</head>
2.百度 CDN:
<head>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	</script>
</head>
3.又拍云 CDN:
<head>
	<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
	</script>
</head>
4.新浪 CDN:
<head>
	<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
	</script>
</head>
5.Google CDN:
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
	</script>
</head>
6.Microsoft CDN:
<head>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">
	</script>
</head>

jQuery 语法

	**基础语法**： $(selector).action()
	 - 美元符号定义 jQuery
	 - 选择符（selector）"查询"和"查找" HTML 元素
	 - jQuery 的 action() 执行对元素的操作

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

入口函数

1.原始方式
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
2.简略方式
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
  • jQuery 入口函数与 JavaScript 入口函数的区别：
    1. jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
    2. JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
    在这里插入图片描述

jQuery选择器

	-  jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
	-  jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
  1. 元素选择器
    - jQuery 元素选择器基于元素名选取元素。
    - $("p")：在页面中选取所有< p>元素
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
  1. .class 选择器
    - jQuery 类选择器可以通过指定的 class 查找元素
    - 语法：$(".test")
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>
  1. #id 选择器
    - jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
    - 语法：$("#test")
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>
语法描述
$("*")选取所有元素
$(this)选取当前 HTML 元素
$("p.intro")选取 class 为 intro 的 < p> 元素
$("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> 元素

事件

  1. 鼠标事件
    - click：单击事件，指单击元素时发生click事件，click()方法触发单击事件
    - 语法：$(selector).click()或$(selector).click(function)（参数:function,描述： 可选。规定当 click 事件发生时运行的函数。）
    - 实例：单击 < p> 元素时警报文本：$("p").click(function(){ alert("段落被点击了。"); });
    - dblclick：双击事件，指双击元素时触发 dblclick 事件，dblclick() 方法触发 dblclick 事件
    - 语法：$(selector).dblclick()或$(selector).dblclick(function)（参数:function,描述： 可选。规定当 dblclick 事件发生时运行的函数。）
    - 实例：双击 < p> 元素时警报文本：$("p").dblclick(function(){ alert("这个段落被双击。"); });
    - mouseenter:鼠标指针悬浮事件，指当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件，mouseenter() 方法触发 mouseenter 事件
    - 语法：$(selector).mouseenter()或$(selector).mouseenter(function)（参数:function,描述： 可选。规定 mouseenter 事件触发时运行的函数）
    - 实例：当鼠标指针进入 < p> 元素时，设置背景色为黄色：$("p").mouseenter(function(){ $("p").css("background-color","yellow"); });
    - mouseleave：鼠标指针离开事件，指当鼠标指针离开被选元素时，会发生 mouseleave 事件,mouseleave() 方法触发 mouseleave 事件
    - 语法：$(selector).mouseleave()或$(selector).mouseleave(function)（参数:function,描述： 可选。规定 mouseleave 事件触发时运行的函数）
    - 实例：当鼠标指针离开 < p> 元素时，设置背景色为灰色：$("p").mouseleave(function(){ $("p").css("background-color","gray"); });
    - hover ：鼠标悬停事件，指鼠标指针在元素位置，会发生hover事件，hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数，方法触发 mouseenter 和 mouseleave 事件
    - 语法：$(selector).hover(inFunction,outFunction)（参数：inFunction，描述： 必需。规定 mouseenter 事件发生时运行的函数。 参数：outFunction。描述： 可选。规定 mouseleave 事件发生时运行的函数。 ）
    - 实例：当鼠标指针悬停在上面时，改变

    元素的背景颜色：$("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); });

$( selector ).hover( handlerIn, handlerOut )
相当于
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

$(selector).hover(handlerInOut)
相当于
$( selector ).on( "mouseenter mouseleave", handlerInOut );
  1. 键盘事件
    - keypress：键被按下事件，keypress() 方法触发 keypress 事件
    - 语法：$(selector).keypress()或$(selector).keypress(function)（参数：function。描述：可选。规定 keypress 事件触发时运行的函数）
    - 实例：计算在 字段内的按键次数：$("input").keypress(function(){ $("span").text(i+=1); });
    - keydown ：键按下的过程事件，keydown() 方法触发 keydown 事件
    - 语法：$(selector).keydown()或$(selector).keydown(function)（参数：function。描述：可选。规定 keydown 事件触发时运行的函数）
    - 实例：当键盘键被按下时，设置 < input> 字段的背景颜色：$("input").keydown(function(){ $("input").css("background-color","yellow"); });
    - keyup：键被松开事件，keyup() 方法触发 keyup 事件
    - 语法：$(selector).keyup()或$(selector).keyup(function)（参数：function。描述：可选。规定 keyup 事件触发时运行的函数。）
    - 实例：当键盘键被松开时，设置 < input> 字段的背景颜色：$("input").keyup(function(){ $("input").css("background-color","pink"); });
event.which 属性返回指定事件上哪个键盘键或鼠标按钮被按下
实例：
返回哪个键盘键被按下：
$("input").keydown(function(event){ 
     $("div").html("Key: " + event.which);
 });
  1. 表单事件
    - submit：提交表单事件，submit() 方法触发 submit 事件，该事件只适用于 < form> 元素，当提交表单时，会发生 submit 事件
    - 语法:$(selector).submit()或$(selector).submit(function)(参数：function。描述：可选。规定当 submit 事件被触发时运行的函数。)
    - 实例：当提交表单时，显示警告框：$("form").submit(function(){ alert("提交"); });
    event.preventDefault();：阻止表单被提交。
    实例:$(document).ready(function(){ $("form").submit(function(event){ event.preventDefault(); alert("阻止表单提交"); }); });
    - change：当元素的值改变时发生 change 事件（仅适用于表单字段），change() 方法触发 change 事件 注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
    - 语法：$(selector).change()或$(selector).change(function)（参数：function。描述：可选。规定针对被选元素当 change 事件发生时运行的函数。）
    - 实例：当 < input> 字段改变时警报文本：$("input").change(function(){ alert("文本已被修改"); });
    - **focus **：当元素获得焦点时（当通过鼠标点击选中元素或者通过tab键定位到元素时），发生foucs事件，focus() 方法触发 focus 事件
    - 语法：$(selector).focus()或$(selector).focus(function)（参数：function。描述：可选。规定当 focus 事件发生时运行的函数。）
    - 实例：添加函数到 focus 事件。当 < input> 字段获得焦点时发生 focus 事件在这里插入代码片$("input").focus(function(){ $("span").css("display","inline").fadeOut(2000); });
    - blur：当元素失去焦点时发生blur事件，blur() 方法触发 blur 事件
    - 语法：$(selector).blur()或$(selector).blur(function)（参数：function。描述：可选。规定当 blur 事件发生时运行的函数）
    - 实例：添加函数到 blur 事件。当 < input> 字段失去焦点时发生 blur 事件：$("input").blur(function(){ alert("输入框失去了焦点"); });
  2. 文档/窗口事件
    - load：当指定的元素加载时，会发生load事件。该事件适用于任何带有URL的元素（比如：图像、脚本、框架、内联框架）以及window对象。根据不同浏览器（Firefox和IE），如果图像已被缓存，则不会触发load事件。注意：还存在一个名为load()的jQuery AJAX方法。根据不同参数决定调用哪个方法（ jQuery 版本 1.8 中已废弃。）
    - 语法：$(selector).load(function)（参数：function 。描述：必需。规定当指定元素加载完成时运行的函数。）
    - 实例：当图像全部加载时警报文本：$("img").load(function(){ alert("图片已载入"); });
    - resize:当调整浏览器大小时，发生resize事件。resize() 方法触发 resize 事件
    - 语法：$(selector).resize()或$(selector).resize(function)（参数：function。描述：可选。规定当 resize 事件被触发时运行的函数。）
    - 实例：对浏览器窗口调整大小进行计数：$(window).resize(function(){ $('span').text(x+=1); });
    - scroll：事件适用于所有可滚动的元素和window对象（浏览器窗口）。scroll() 方法触发 scroll 事件
    - 语法：$(selector).scroll()或$(selector).scroll(function)（参数：function。描述：可选。规定当 scroll 事件被触发时运行的函数。）
    - 实例：对元素滚动的次数进行计数：$("div").scroll(function(){ $("span").text(x+=1); });

jQuery效果

  • jQuery hide() 和 show() 方法来隐藏和显示 HTML 元素；Callback 函数在当前动画 100% 完成之后执行。
    语法：$(selector).hide(speed,callback);和$(selector).hide(speed,callback);（可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒；可选的 callback 参数是隐藏或显示完成后所执行的函数名称。）
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>

<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
</script>
</head>
<body>
	
<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
	
</body>

第二个参数（linear）是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。
  • jQuery toggle() 使用 toggle() 方法来切换 hide() 和 show() 方法
    语法：$(selector).toggle(speed,callback);（可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒；可选的 callback 参数是隐藏或显示完成后所执行的函数名称。）
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>

jQuery HTML

  • 获得内容和设置内容 - text()、html() 以及 val()
    - text() - 设置或返回所选元素的文本内容
    - html() - 设置或返回所选元素的内容（包括 HTML 标记）
    - val() - 设置或返回表单字段的值
text() 和 html() 方法来获得内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>



/val() 方法获得输入字段的值:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
<button>显示值</button>
</body>
</html>

/设置内容 - text()、html() 以及 val()：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});
</script>
</head>

<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
  • 获取属性和设置属性 - attr()
///atrr()获得属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
</html>
/atrr()设置多个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr({
      "href" : "http://www.runoob.com/jquery",
      "title" : "jQuery 教程"
    });
	// 通过修改的 title 值来修改链接名称
	title =  $("#runoob").attr('title');
	$("#runoob").html(title);
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>
  • prop()函数与attr()函数的区别
    - prop()函数：
    1. 如果有相应的属性，返回指定属性值。
    2. 如果没有相应的属性，返回值是空字符串
    - attr()函数：
    1. 如果有相应的属性，返回指定属性值。
    2. 如果没有相应的属性，返回值是 undefined。
    - 在HTML中：
    1. 元素本身就带有的固有属性，在处理时，使用prop方法。
    2. 元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。
    3. 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()。
  • 添加新的 HTML 内容:
    - append() - 在被选元素的结尾插入内容
    - prepend() - 在被选元素的开头插入内容
    - after() - 在被选元素之后插入内容
    - before() - 在被选元素之前插入内容
/通过 append() 和 prepend() 方法添加若干新元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
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);        // 追加新元素
}
</script>
</head>
<body>

<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>

</body>
</html>
/通过 after() 和 before() 方法添加若干新元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText(){
	var txt1="<b>I </b>";                    // 使用 HTML 创建元素
	var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
	var txt3=document.createElement("big");  // 使用 DOM 创建元素
	txt3.innerHTML="jQuery!";
	$("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}
</script>
</head>
<body>

<img src="/images/logo2.png" >
<br><br>
<button onclick="afterText()">之后插入</button>

</body>
</html>
  • 删除元素/内容
    - remove() - 删除被选元素（及其子元素）
    - empty() - 从被选元素中删除子元素
//jQuery remove() 方法删除被选元素及其子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>移除div元素</button>

</body>
</html>
///jQuery empty() 方法删除被选元素的子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>清空div元素</button>

</body>
</html>
///过滤被删除的元素,remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>

</body>
</html>
  • jQuery 尺寸方法
    - width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
    - height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
    - innerWidth() 方法返回元素的宽度（包括内边距）。
    - innerHeight() 方法返回元素的高度（包括内边距）。
    - outerWidth() 方法返回元素的宽度（包括内边距和边框）。
    - outerWidth() 方法返回元素的宽度（包括内边距和边框）。
/width() 和 height() 方法
<!DOCTYPE html>
<html>
<head>	
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").width() + "</br>";
    txt+="div 的高度是: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>

</body>
</html>

/innerWidth() 和 innerHeight() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
<p>innerHeight() - 返回元素的高度 (包含内边距)。</p>

</body>
</html>

///outerWidth() 和 outerHeight() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
    txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>

</body>
</html>
  • jQuery 元素标签的关系

在这里插入图片描述标签家谱

jQuery AJAX

  • AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
方法描述
$.ajax()执行异步 AJAX 请求
$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据
$.getJSON()使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript()使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param()创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
load()从服务器加载数据，并把返回的数据放置到指定的元素中
  • $.ajax()
    - 定义： ajax() 方法用于执行 AJAX（异步 HTTP）请求。
    - 语法：$.ajax({name:value, name:value, ... })

参数

名称值/描述
type规定请求的类型（GET 或 POST）。
url规定发送请求的 URL。默认是当前页面。
dataType预期的服务器响应的数据类型。
contentType发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
data规定要发送到服务器的数据。
success(result,status,xhr)当请求成功时运行的函数。
error(xhr,status,error)如果请求失败要运行的函数。
timeout设置本地的请求超时时间（以毫秒计）。
cache布尔值，表示浏览器是否缓存被请求页面。默认是 true。
async布尔值，表示请求是否异步处理。默认是 true。
username规定在 HTTP 访问认证请求中使用的用户名。
password规定在 HTTP 访问认证请求中使用的密码。
scriptCharset规定请求的字符集。
xhr用于创建 XMLHttpRequest 对象的函数。
jsonp在一个 jsonp 中重写回调函数的字符串。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.ajax({url:"demo_test.txt",success:function(result){
			$("#div1").html(result);
		}});
	});
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取其他内容</button>

</body>
</html>
  • $.get()
    - 定义： $ .get() 方法使用 HTTP GET 请求从服务器加载数据。
    - 语法：$.get(URL,data,function(data,status,xhr),dataType)

参数

参数描述
URL必需。规定您需要请求的 URL。
data可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。规定当请求成功时运行的函数。
dataType可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.get("/try/ajax/demo_test.php",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

</body>
</html>
  • $.post()
    - $ .post() 方法使用 HTTP POST 请求从服务器加载数据。
    - 语法：$(selector).post(URL,data,function(data,status,xhr),dataType)

参数

参数描述
URL必需。规定将请求发送到哪个 URL。
data可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。规定当请求成功时运行的函数。
dataType可选。规定预期的服务器响应的数据类型。 默认地，jQuery 会智能判断。

实例

/使用 HTTP POST 请求从服务器加载数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.post("/try/ajax/demo_test_post.php",{
			name:"菜鸟教程",
			url:"http://www.runoob.com"
		},
		function(data,status){
			alert("数据: \n" + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>

<button>发送一个 HTTP POST 请求页面并获取返回内容</button>

</body>
</html>
///使用 AJAX 的 POST 请求来改变 <div> 元素的文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("input").keyup(function(){
		txt=$("input").val();
		$.post("demo_ajax_gethint.php",{suggest:txt},function(result){
			$("span").html(result);
		});
	});
});
</script>
</head>
<body>

<p>在以下输入框中输入名字:</p>
第一个名称:
<input type="text" />
<p>匹配项: <span></span></p>
<p>该实例的PHP代码 (<a href="demo_ajax_gethint.txt" target="_blank">demo_ajax_gethint</a>) </p>

</body>
</html>
  • param()
    - param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
    - 语法：$.param(object,trad)

参数

参数描述
object必需。规定要序列化的数组或对象。
trad可选。布尔值，指定是否使用参数序列化的传统样式。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	personObj=new Object();
	personObj.firstname="John";
	personObj.lastname="Doe";
	personObj.age=50;
	personObj.eyecolor="blue"; 
	$("button").click(function(){
		$("div").text($.param(personObj));
	});
});
</script>
</head>
<body>

<button>序列化对象</button>
<div></div>

</body>
</html>
  • load()
    - 定义：load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。
    - 语法：$(selector).load(url,data,function(response,status,xhr))

参数

参数描述
url必需。规定您需要加载的 URL。
data可选。规定连同请求发送到服务器的数据。
function可选。规定 load() 方法完成时运行的回调函数。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>

</body>
</html>

如何使用其他框架并与jQuery共存

  • noConflict() 方法
    - 定义：noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

实例

通过全名替代简写的方式来使用 jQuery：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

/noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
var jq=$.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

借鉴于菜鸟教程，详细请点击

黄盖哥哥
关注
专栏目录
使用ajax实时更新查询时的提示词
余木尘的博客
09-23 306
1、首先在搜索框下面添加一个提示词板（默认隐藏：display: none;），这里我用的ul标签，加上boostrap布局 <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="for...
jQuery_04
weixin_64692712的博客
03-23 813
1.1 加载DOM两种方式(区别)、 个数与顺序问题 优先顺序跟版本有关 //window.onload 自动调用函数只能写一个 多个会被覆盖 //可以写多个 // $(function(){ // console.info("jQuery方式"); // }) 1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等] --元素.on/bind() ...
jQuery 汉字转拼音
q_2540638774的博客
04-12 1346
首先引入js文件 <script src="Convert_Pinyin.js"></script> HTML代码 <body> <div> 输入名称：<input type="text" id="chinaName" onBlur="ConvertName()" /> <br/> 全写拼音：<input type="text.
使用jquery自定义弹窗
qq_44604924的博客
11-24 2680
自定义弹窗 使用jquery的$.dialog()方法可自定义弹窗 参数： 属性 title 窗口名称 html 内容显示传入的html代码 url 内容显示iframe，src为传入的ur width 内容区宽度 height 内容区高度 buttons 数组:按钮及事件 buttons:[{ text: “确认”, isEmphasize: true, //蓝色按钮 handler: function(){ alert(‘handler’) } },{ text: “取消”, han
jQuery_Mobile_教程集合
03-21
jQuery Mobile 提供了一系列针对触摸操作友好的 ui 组件和基 于 ajax 的导航系统来支持动画的页面转场。构建一个自己的 jQuery Mobile 页面是非常容易的
jquery-2.1.1.js
06-21
jquery-2.1.1.js
Jquery提示框
05-10
用Jquery提示框 欢迎使用 欢迎交流学习 $.msgBox.showMsgBox({//显示提示框 title: "系统提示", //标题 content: "测试提示框! 测试...", //内容 width: 300, //宽(可选属性,值为0和不写此属性效果相同) ...
jQuery提交多个表单的小例子
12-09
代码如下:[removed] $(function(){ $(“#btnSubmit”).click(function(){ $(“form[name=’form1′]”).submit(); $(“form[name=’form2′]”).submit();...form name = “form1” action = “han
《锋利的jQuery》(高清扫描版-有书签)
07-03
虽然jQuery已经不是那么火了，但是在实际开发中还是不可或缺的轻量级JS库，还是值得一看的！
CCD式铆合测定机保养说明书.doc
06-30
CCD式铆合测定机保养说明书
IOS操作系统开发/调试的案例
06-29
IOS操作系统开发/调试的案例 iOS操作系统开发和调试是一个复杂但非常有趣的过程。下面是一个简单的iOS应用开发案例，展示了如何使用Swift和Xcode开发一个基本的iOS应用，并进行调试。
【精美排版】基于STCC单片机的简易电子琴.doc
06-30
单片机
【精品】毕业设计：单片机模拟交通灯设计.doc
06-30
单片机
ATM系统需求说明书.doc
06-30
ATM系统需求说明书
线性离散系统的Z变换分析法-2
06-30
线性离散系统的Z变换分析法的后续部分，计算机控制系统知识
DF8B机车32位微机控制柜使用维护说明书.doc
最新发布
06-30
说明书
for (x in 1:nrow(df_all1_new)) { df_all1_new$han_pei <-if(df_all1_new$tian_cut[x]=="零"){ 0 }else if(df_all1_new$tian_cut[x]=="一"){ 0.15*df_all1_new$站数[x] }else if(df_all1_new$tian_cut[x]=="二"){ 0.6*df_all1_new$站数[x] }else if(df_all1_new$tian_cut[x]=="三"){ 1.5*df_all1_new$站数[x] }else if(df_all1_new$tian_cut[x]=="四"){ 4*df_all1_new$站数[x] }else{ 13*df_all1_new$站数[x] } } 这段代码有什么问题
07-09
要解决这个问题，你可以使用索引（例如`df_all1_new$han_pei[x]`）对数据框进行赋值操作，以保存计算结果。修改后的代码如下： ```R for (x in 1:nrow(df_all1_new)) { if(df_all1_new$tian_cut[x]=="零"){ df_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值