`
backspace
  • 浏览: 137115 次
文章分类
社区版块
存档分类
最新评论

jQuery:1.[3

 
阅读更多
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>

 

   
1
4
分享到:
评论

相关推荐

    jquery.color.js

    1. **颜色转换**:jQuery.color.js支持多种颜色格式之间的转换,如RGB、RGBA、HSL、HSLA等,这使得在处理不同颜色模型时更加灵活。 2. **颜色动画**:提供`animate()`方法,可以实现颜色属性的平滑过渡,例如改变...

    jquery手册(jquery.cuishifeng.cn网页版)2

    1. **选择器**: jQuery的选择器允许你高效地选取DOM元素,如`$("#id")`选取ID为指定值的元素,`$(".class")`选取所有class为指定值的元素,`$("tag")`选取所有特定类型的元素。 2. **DOM操作**: jQuery提供了简便的...

    jquery.media.js.zip

    1. **引入依赖**:首先确保引入jQuery库,然后引入jQuery.media.js插件文件。 ```html &lt;script src="path/to/jquery.js"&gt; &lt;script src="path/to/jquery.media.js"&gt; ``` 2. **初始化媒体元素**:使用jQuery选择器选择...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    1. 兼容性:jQuery 3.0.0对浏览器的兼容性进行了全面升级,支持现代浏览器的同时,也保留了对旧版IE的兼容,确保代码能在广泛的应用场景中正常运行。 2. 性能提升:3.0.0版本对内部算法进行了优化,提高了代码执行...

    最新jquery-2.1.1.js以及jquery-2.1.1.min.js文件

    1. **选择器**:jQuery提供了丰富的CSS选择器,使得开发者可以通过简单的语法获取DOM元素,如`$("#id")`、`$(".class")`、`$("tag")`等。 2. **DOM操作**:jQuery提供了便利的方法来创建、修改、添加和删除DOM元素...

    jquery-2.1.4.js 、jquery-2.1.4.min.js 【jquery包 js】

    1. **DOM操作**:jQuery提供了丰富的选择器,如ID选择器、类选择器等,使得选取DOM元素变得简单。此外,还可以方便地进行元素的添加、删除和修改。 2. **事件处理**:通过`.on()`方法,可以方便地绑定和解绑事件,...

    Jquery.media.js插件

    Jquery.media.js插件,包含三个文件:jquery.media.js、jquery-1.7.2.min.js、demo.html demo文件如下: &lt;html&gt; &lt;head&gt; [removed][removed] [removed][removed] [removed] $(function() { $('....

    jquery.cookie.js,jquery.min.js

    1. **jQuery**: jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在压缩包中,我们有两个jQuery相关的文件——`jquery.min.js`和`jquery-1.11.0.min.js`。`jquery.min.js`可能...

    jQuery:jQuery.extend函数详解

    ##### 1. 基本原型 `jQuery.extend`的基本原型为: ```javascript jQuery.extend(dest, src1, src2, src3, ...); ``` 这里的`dest`是指目标对象,`src1`, `src2`, `src3`等则是源对象。该方法的主要作用是将源...

    jquery-1.12.4-jquery.min.js.zip

    1. **DOM操作**:jQuery 提供了一套丰富的选择器,可以方便地选取DOM元素,如$("#id")用于选取ID为id的元素,$(".class")用于选取所有class为class的元素。此外,它还提供了链式操作,如$("#element").addClass(...

    jquery-3.2.0.js,jquery-3.2.0.min.js

    ### 1. jQuery 核心特性 **DOM 操作:** - **选择器(Selectors)**:jQuery 提供了类似 CSS 的选择器,如 `$("#id")` 用于选取 ID 为 id 的元素,`$(".class")` 用于选取所有 class 为 class 的元素。 - **属性...

    jquery.marquee.js官方下载

    1. **方向控制**:支持上下左右四个方向的滚动,可以自由选择元素内容的滚动方向。 2. **速度调整**:允许设置滚动速度,以满足不同场景的需求,创造快慢有致的效果。 3. **暂停与继续**:可以通过事件或方法实现...

    jQuery/jquery-1.7.2.min.js jquery-1.7.2.js 文件

    1. `jquery-1.7.2.js`是未压缩的源代码版本,代码可读性较高,便于开发者阅读、学习和调试。在开发过程中,为了便于理解和定位问题,通常会使用这种未压缩的版本。 2. `jquery-1.7.2.min.js`则是经过压缩和优化的...

    jquery.countdown.js自定义倒计时代码.zip

    1. 引入jQuery库:确保你的HTML文件中已经引入了jQuery,因为这个插件依赖于jQuery环境。 2. 引入`jquery.countdown.js`:将插件的JavaScript文件链接到HTML页面中。 3. 创建HTML元素:在页面中创建一个元素(如`...

    jquery.page.js下载

    1. 确保引入的jQuery版本与`jquery.page.js`兼容,避免出现运行错误。 2. 考虑性能问题,只对需要应用平滑滚动的元素调用`.page()`方法。 3. 在移动设备上使用时,应考虑触摸事件的支持和优化。 总结,`jquery.page...

    jQuery.extend和jQuery.fn.extend的区别

    1. `jQuery.extend`用于合并和扩展对象,可以进行浅拷贝或深拷贝,通常用于配置选项的合并。 2. `jQuery.fn.extend`用于向jQuery对象添加新的方法,增强了jQuery的功能性,使我们可以自定义jQuery插件。 理解这两个...

    jquery-2.0.3.js和jquery-2.0.3.min.js

    1. **选择器增强**:jQuery 2.0.3支持CSS3选择器,使得开发者可以通过更复杂的CSS规则来选取元素,提高了代码的灵活性和可读性。 2. **事件处理**:事件绑定和解绑的API更加简洁,同时增加了事件委托功能,使得动态...

    jquery回到顶部插件jquery.goup.js

    1. 引入jQuery库和jquery.goup.js文件:首先确保页面已经引入了jQuery,然后将jquery.goup.js文件添加到页面底部。 2. HTML结构:在HTML中添加返回顶部按钮的占位符,通常放在的最后,例如: ```html 返回顶部 ``` ...

    jquery 1.12.4 .min.js 含源码

    jquery 1.12.4 .min.js 含源码 包含以下文件: jquery.1.12.4.min.js jquery.1.12.4.js // 这个是源码哦 截至2017.11.21, jQuery1.x 最新最稳定版本

    jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】

    - **更快的速度**:由于去除了对旧版IE的支持,jQuery 2.0.0的执行速度相比1.x版本有所提升,尤其在DOM操作、事件处理和动画效果方面。 - **更小的体积**:移除对旧IE的兼容性代码,使得文件大小显著减小。如`...

Global site tag (gtag.js) - Google Analytics