建一个个人网站要多少钱,深圳极速网站建设报价,wordpress表单插件,网站开发现在用什么#xff08;1#xff09;文档就绪函数$(document).ready(function(){--- jQuery functions go here ----});为了防止文档在完全加载#xff08;就绪#xff09;之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数#xff0c;操作可能失败。下面是具体的例子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 classpanelpW3School - 领先的 Web 技术教程站点/p/divp classflip请点击这里/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); 7callback参数$(selector).hide(speed,callback); $(p).hide(1000,function(){alert(The paragraph is now hidden);}); 8Chaining链接技术允许我们在相同的元素上运行多条 jQuery 命令一条接着另一条。这样的话浏览器就不必多次查找相同的元素。如需链接一个动作您只需简单地把该动作追加到之前的动作上。 p1 元素首先会变为红色然后向上滑动然后向下滑动$(#p1).css(color,red).slideUp(2000).slideDown(2000); 提示当进行链接时代码行会变得很差。 9获得元素内容和属性 获得内容 - text()、html() 以及 val() p idtestthis is Ba/B test./p $(#btn1).click(function(){ alert(Text: $(#test).text());});输出this is a test. $(#btn2).click(function(){ alert(HTML: $(#test).html());});输出this is Ba/B test. input typetext idtest value123456 $(#btn1).click(function(){ alert(Value: $(#test).val());}); 输出123456 获取属性 - attr()a href# idtest $(button).click(function(){ alert($(#test).attr(href));}); 输出# 9设置元素内容和属性 $(#btn1).click(function(){ $(#test1).text(Hello world!);}); $(#btn2).click(function(){ $(#test2).html(bHello 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) -删除 classitalic 的所有 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);}); 15AJAXload()从服务器加载数据并把返回的数据放入被选元素中。$(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
