[jQuery] jQuery函数


（1）文档就绪函数
$(document).ready(function(){
--- jQuery functions go here ----
});
为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小


（2）隐藏/显示元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


（3）显示被隐藏的元素，并隐藏已显示的元素：
$(selector).toggle(speed,callback);
用来切换 hide() 和 show() 方法。

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

（4）淡入淡出
$(selector).fadeIn(speed,callback);

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});


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

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});


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

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});


$(selector).fadeTo(speed,opacity,callback);
opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});


（5）滑动[使元素上下滑动]

示例

<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
</div>
<p class="flip">请点击这里</p>

被隐藏的元素向下滑动[显示div]
$(selector).slideDown(speed,callback);

$("#flip").click(function(){
  $("#panel").slideDown();
});

被隐藏的元素向上滑动[隐藏div]
$(selector).slideUp(speed,callback);

$("#flip").click(function(){
  $("#panel").slideUp();
});

上下滑动[显示/隐藏div]
$(selector).slideToggle(speed,callback);

$("#flip").click(function(){
  $("#panel").slideToggle();
});


（6）动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

实例
首先把div元素的 CSS position 属性设置为 relative、fixed 或 absolute
再把div元素移动到左边，直到 left 属性等于 250 像素为止，同时可以设置其他属性。
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

把 <div> 元素移动到右边，然后增加文本的字号
$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

停止动画效果
$(selector).stop(stopAll,goToEnd);


（7）callback参数
$(selector).hide(speed,callback);

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});


（8）Chaining
链接技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

提示：当进行链接时，代码行会变得很差。


（9）获得元素内容和属性

获得内容 - text()、html() 以及 val()

<p id="test">this is <B>a</B> test.</p>

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
输出：this is a test.

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
输出：this is <B>a</B> test.

<input type="text" id="test" value="123456">

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

输出：123456


获取属性 - attr()
<a href="#" id="test">

$("button").click(function(){
  alert($("#test").attr("href"));
});

输出：#

（9）设置元素内容和属性

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});

$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});

$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

$("button").click(function(){
  $("#test4").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});


可以看出，和获取函数唯一的区别就是以上函数里面有参数，而获取时是没有参数的。

 

（10）添加新的 HTML 内容/元素

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


（11）删除 HTML 元素

移除元素：remove() - 删除被选元素及其子元素
清空元素子元素：empty()  - 删除子元素,保留选中元素

过滤被删除的元素：
$("p").remove(".italic") -删除 class="italic" 的所有 <p> 元素


(12)操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

样式表
.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

例子

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important blue");
});


$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

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

设置
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

 

返回
$("p").css("background-color");
$("p").css({"background-color","font-size"});


（14）尺寸
width()  方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
 
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

文档的尺寸
$(document).width();
$(document).height();

窗口[浏览器视窗]的尺寸
$(window).width();
$(window).height();

设置指定的 <div> 元素的宽度和高度：
$("button").click(function(){
  $("#div1").width(500).height(500);
});


（15）AJAX
load()：从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。


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

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

 

$.post() 方法通过 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);
  });
});

jQuery AJAX 请求
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件

(url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项

示例
$.ajax(options)

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});


（16）冲突
jQuery 使用 $ 符号作为 jQuery 的简写。如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？这时：

1）您可以通过全名替代简写的方式来使用jQuery

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

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});

2）您可以创建自己的简写
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});


3）把 $ 符号作为变量传递给 ready 方法

如果你的jQuery代码块使用$简写，并且您不愿意改变这个快捷方式，那么您可以把$符号作为变量传递给ready方法。这样就可以在函数内使用$符号了。而在函数外，依旧不得不使用 "jQuery"

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行！");
  });
});

 

转载于:https://www.cnblogs.com/avivaye/archive/2013/03/29/2988922.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/433756.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

beautifulsoup网页爬虫解析_Python爬虫神器：PyQuery，解析网页更简单，小白也能学会

beautifulsoup网页爬虫解析_Python爬虫神器：PyQuery，解析网页更简单，小白也能学会

图/文&#xff1a;迷神我们做python爬虫&#xff0c;通过requests抓取到内容就需要正则匹配&#xff0c;或者其他解析库解析内容。很多可能和我一样的人&#xff0c;都使用jquery的&#xff0c;那用的还是非常爽的。而pyquery库就是jQuery的Python实现&#xff0c;能够以jQuery…
阅读更多...
ubuntu设置始终亮屏_ubuntu系统每次启动屏幕都是最大亮度问题的解决方法

ubuntu设置始终亮屏_ubuntu系统每次启动屏幕都是最大亮度问题的解决方法

这个方法你尝试过没首先你要确保有这个文件:复制代码代码如下:/sys/class/backlight/acpi_video0/brightnesscat出来的值就是你当前的屏幕亮度.我们修改下面的文件加入一些用户启动设置:复制代码代码如下:sudo gedit /etc/rc.local在 exit 0 的上方加入以下代码(确保exit 0没有…
阅读更多...
unityios开发--加载视频以及加载完成之后自动跳转 .

unityios开发--加载视频以及加载完成之后自动跳转 .

在做游戏或者是虚拟漫游一般都会用到在开始的时候加载一段视频&#xff0c;这个视频可能一个介绍整个游戏或者是整个项目的。在加载完了之后自动的跳转到主画面或一个场景&#xff0c;在前在网上百度了一下找到的大部分都是win的好不容易找到了ios的。 Unity3D中播放游戏视频的…
阅读更多...
rnn神经网络模型_一文读懂序列建模（deeplearning.ai）之循环神经网络(RNNs)

rnn神经网络模型_一文读懂序列建模（deeplearning.ai）之循环神经网络(RNNs)

作者&#xff1a;Pulkit Sharma&#xff0c;2019年1月21日翻译&#xff1a;陈之炎校对&#xff1a;丁楠雅本文为你详细介绍序列模型&#xff0c;并分析其在不同的真实场景中的应用。简介如何预测一个序列中接下来要发生什么事情是一个非常吸引人的课题&#xff0c;这是我对数据…
阅读更多...
mysql 人名用什么类型_如何选择合适的MySQL数据类型

mysql 人名用什么类型_如何选择合适的MySQL数据类型

一、MySQL数据类型选择原则更小的通常更好&#xff1a;一般情况下选择可以正确存储数据的最小数据类型。越小的数据类型通常更快&#xff0c;占用磁盘&#xff0c;内存和CPU缓存更小。简单就好&#xff1a;简单的数据类型的操作通常需要更少的CPU周期。例如&#xff1a;整型比字…
阅读更多...
am335x uart5配置

am335x uart5配置

任务&#xff1a;配置uart5
阅读更多...
XML Schema ---complexType-----复合元素

XML Schema ---complexType-----复合元素

混合的复合类型可包含属性、元素以及文本。 带有混合内容的复合类型 XML 元素&#xff0c;"letter"&#xff0c;含有文本以及其他元素&#xff1a; <letter>Dear Mr.<name>John Smith</name>.Your order <orderid>1032</orderid>will …
阅读更多...
Java笔记（一）—StringBuilder类

Java笔记（一）—StringBuilder类

1、StringBuilder类概述 StringBuilder是一个可变的字符串类&#xff0c;主要指的是StringBuilder对象 中的内容是可变的。与之相比String对象的内容是不变的。2、StringBuilder常用构造方法 public StringBuilder() {} //创建空白可变字符串 public StringBuilder(String st…
阅读更多...
ubuntu下制作u盘镜像_deepin下制作win10启动U盘

ubuntu下制作u盘镜像_deepin下制作win10启动U盘

1.准备①下载multibootusb&#xff1a;http://multibootusb.org/page_download/ ②准备一个win10的镜像文件 ③准备一个U盘&#xff0c;最好先备份U盘数据再格式化一道2.打开multibootusb工具输入开机密码&#xff0c;点击认证3.multibootusb操作部分①选择U盘的第一个分区 ②安…
阅读更多...
Shared_from_this 几个值得注意的地方

Shared_from_this 几个值得注意的地方

shared_from_this()是enable_shared_from_this<T>的成员 函数&#xff0c;返回shared_ptr<T>。首先需要注意的是&#xff0c;这个函数仅在shared_ptr<T>的构造函数被调用之后才能使 用。原因是enable_shared_from_this::weak_ptr并不在构造函数中设置&#x…
阅读更多...
asterisk1.8 账号信息mysql存储(动态)

asterisk1.8 账号信息mysql存储(动态)

1. 首先需要先编译出以下6个模块 res_realtime.so pbx_realtime.so func_realtime.so res_config_mysql.so app_mysql.so cdr_mysql.so 其中有些模块&#xff0c;asterisk默认并不编译&#xff0c;需要修改menuselect.makeopts这个文件&#xff0c;将里面的相应…
阅读更多...
签证上的mult是什么意思_申根签证中mult是什么意思

签证上的mult是什么意思_申根签证中mult是什么意思

展开全部申根签证中mult是是多次的意思&#xff0c;指可以在有效期内多次往返申根国家。类型申根签证分62616964757a686964616fe78988e69d8331333431373939为入境和过境两类。1.入境签证有一次入境和多次入境两种。签证持有者分别可一次连续停留90天或每半年多次累计不超过3个月…
阅读更多...
Java拆分字符串

Java拆分字符串

1、例如给出如下字符串"91 27 46 38 50"如何将其拆分成{"91", "27", "46", "38", "50"}呢&#xff1f;2、我们可以通过String类中的public String[] split(String regex)方法来实现String s "91 27 46 38 5…
阅读更多...
Perl正则表达式匹配

Perl正则表达式匹配

\w([-.]\w)*((aa.com)|(bb.com)|(163.com)) 这个正则表达式可实现匹配含有aa.com或bb.com或163.com 的email 转载于:https://www.cnblogs.com/inbase/archive/2013/04/01/2994479.html
阅读更多...
大数据翻页_大数据量下的分页解决方法

大数据翻页_大数据量下的分页解决方法

最好的办法是利用sql语句进行分页&#xff0c;这样每次查询出的结果集中就只包含某页的数据内容。再sql语句无法实现分页的情况下&#xff0c;可以考虑对大的结果集通过游标定位方式来获取某页的数据。sql语句分页&#xff0c;不同的数据库下的分页方案各不一样&#xff0c;下面…
阅读更多...
centos7 安装git_Centos7.4 Yapi 服务搭建

centos7 安装git_Centos7.4 Yapi 服务搭建

Centos Yapi服务搭建转载请标明原文出处参考以下网址&#xff0c;排名不分先后https://github.com/YMFE/yapihttps://blog.csdn.net/guangzhou007_java/article/details/90779222https://www.jianshu.com/p/994bc7b19b26我的服务器环境阿里云服务器 centos 7.4使用 https://one…
阅读更多...
asterisk使用MYSQL认证的配置方法

asterisk使用MYSQL认证的配置方法

asterisk要使用MYSQL实时认证peers&#xff0c;就必须安装asterisk的realtime 和 mysql 模块&#xff0c;这些模块在asterisk插件包中 下载地址是&#xff1a;http://www.asterisk.org/downloads 下载之后./configure 然后sudo make &&sudo make install && …
阅读更多...
Java笔记—字符缓冲流

Java笔记—字符缓冲流

一、字符缓冲流构造方法简述 BufferedReader&#xff1a;从字符输入流中读取文本&#xff0c;缓冲各个字符&#xff0c;从而实现字符、 数组和行的高效读取。 可以指定缓冲区的大小&#xff0c;或者可使用默认的大小。大 多数情况下&#xff0c;默认值就足够大了。构造方法&am…
阅读更多...
手机来电秀怎么开启_360手机卫士怎么设置来电秀 360手机卫士来电秀设置方法...

手机来电秀怎么开启_360手机卫士怎么设置来电秀 360手机卫士来电秀设置方法...

360手机卫士除了防护等安全功能外&#xff0c;它的来电秀也是比较火热的&#xff0c;很多朋友都喜欢在这里设置自己别具个性的来电秀&#xff0c;这篇文章就一起了解一下360手机卫士怎么设置来电秀。360手机卫士来电秀设置是在【隐私保护】中&#xff0c;所以很多朋友都没找到在…
阅读更多...
SqlServer查询语句中用到的锁

SqlServer查询语句中用到的锁

前段时间**公司DBA来我们这培训。讲了一大堆MYSQL的优化。 QA环节一程序员问“SQL语句中的 with nolock 除了不锁表外,是否能读其他锁住的数据"。 讲课的人嘟嘟了半天没解释清楚&#xff08;有可能是MYSQL里没有这个机制&#xff09;&#xff0c;公司的另一程序员给出了一…
阅读更多...
最新文章

Copyright @ 2022~2023