开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery:1.[3-4],jQuery基础学习(二)

简介:
+关注继续查看
ylbtech-jQuery:jQuery学习
jQuery:1.3.1,改变HTML元素内容返回顶部
复制代码
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").html("W3School");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button>
</body>

</html>
复制代码
jQuery:1.3.2,向HTML元素追加内容返回顶部
复制代码
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").append(" <b>W3School</b>.");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button>
</body>

</html>
复制代码
jQuery:1.3.3,在HTML元素之后追加内容返回顶部
复制代码
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").after(" W3School.");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button>
</body>

</html>
复制代码
jQuery:1.4.1,改变HTML元素的CSS属性返回顶部
复制代码
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").html("W3School");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button>
</body>

</html>
复制代码
jQuery:1.4.2,改变多个CSS属性返回顶部
复制代码
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"red","font-size":"200%"});
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>
复制代码
jQuery:1.4.3,获得元素的CSS属性返回顶部
复制代码
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").click(function(){
  $("#result").html($(this).css("background-color"));
  });
});
</script>
</head>

<body>
<div style="width:100px;height:100px;
background:#ff0000"></div>
<p id="result">Click in the box</p>
</body>
</html>
复制代码
jQuery:1.5.1,使用 $(selector).load(url) 来改变 HTML 内返回顶部
复制代码
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  $('#myDiv').load('jquery/test1.txt');
  });
});
</script>
</head>
<body>

<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>

</body>
</html>
复制代码
jQuery:1.5.2,使用 $.ajax(options) 来改变 HTML 内容返回顶部
复制代码
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});
</script>
</head>
<body>

<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>

</body>
</html>
复制代码

 

本文转自ylbtech博客园博客,原文链接:http://www.cnblogs.com/ylbtech/archive/2013/01/14/2859052.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
插件编写---jquery源码品读之入口extend(1)
//整个extend函数代表着如何寻找过来的参数(可以是任何对象【数组也是对象】),返回需要的对象。在javascirpt中extend理论之一是合并或复制对象。那么如何&lt;pre name="code" class="javascript"&gt;复制&lt;span style="font-family: Arial, Helvetica, sans-serif;"&gt;呢?基本
723 0
自定义构建jquery插件实验(2)
//简单的 test.js ;(function($){ $.fn.getData=function(options){ return this.append(options); } })(jQuery); test.html <!DOCTYPE html> <html> <head> <meta chars
731 0
jQuery插件编写及链式编程模型小结
  JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效。大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一、jQuery插件开发快速上手 1、jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。
1012 0
jquery插件制作教程 txtHover(转载)
http://www.jb51.net/article/31082.htm 该系列文章是我阅读
492 0
推荐15款创建漂亮幻灯片的 jQuery 插件
  对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所。你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插件,以美丽夺目的方式显示的作品。
1134 0
JQuery zoom插件学习
jquery zoom是一款图片放大插件,经常用在商城商品页面里。 使用JQuery zoom插件,除了需要引入JQuery.js外,还要引入JQuery.zoom.js文件及jqzoom.css文件 下面是要操作的图片节点 最后加上初始化的js代码,不出意外就成了 $(document).ready(function(){ $(".jqzoom").jqueryzoom(); }); 但事情总不会这么顺利,这个问题害我忙活了半天,搞的我还以为jquery.zoom.js文件有错呢,结果把整个js文件研究了一遍,好在代码不多,用chrome调试运行一遍还是能看的懂得。
646 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
零基础CSS入门教程
立即下载
《零基础HTML入门教程》
立即下载