`

jQuery操作文档-20130624

阅读更多
今天的学习

unwrap()

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").unwrap();
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
article{background-color:pink;}
</style>
</head>
<body>

<div>
<p>这是 div 元素中的段落。</p>
</div>

<article>
<p>这是 article 元素中的段落。</p>
</article>

<button>删除每个 p 元素的父元素</button>

</body>
</html>


$("button").click(function(){
  $("p").unwrap();
});
这个可以删除父类的元素 在这个里面两个父类都是设置了背景颜色用unwrap()就可以将背景颜色给删除掉,只要是在父类里面的元素都可以删除掉


val()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(":text").val("Hello Kitty");
  });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" value="Hello World" /></p>
<button>改变文本域的值</button>
</body>
</html>

$("button").click(function(){
  $(":text").val("Hello World");
});

可以直接利用val()来修改input的text类型里面值

wrap()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrap("<div></div>");
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用 div 包裹每个段落</button>
</body>
</html>

$(".btn1").click(function(){
   $("p").wrap("<div></div>");
});

在div元素中包裹每个段落将事先设定好的样式包裹住p标签

wrapAll()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrapAll("<div></div>");
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用一个 div 包裹所有段落</button>
</body>
</html>


在div中包裹所有段落这个和上面不同的是上面是每一个段落这个是全部效果的不同时 上面的两个p 之间会有空行 而这个不会有空行是全部的包裹进一个div上面其实是分了两个div来包裹

wrapinner()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrapAll("<b></b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">加粗段落中的文本</button>
</body>
</html>


$(".btn1").click(function(){
   $("p").wrapInner("<b></b>");
});

在每个p元素的内容上包围b元素
分享到:
评论
1 楼 萧远山 2013-06-24  
标题格式错了
应该是
[JS代码库]jQuery操作文档-20130622

相关推荐

    jquery插件jquery-ui-1.8.2.custom.min.js

    "jquery-1.4.2-vsdoc.js"是一个用于Visual Studio的文档文件,为开发者提供IDE内的API提示。 此外,"jquery.cookie.js"是另一个jQuery插件,用于处理浏览器的Cookie。它允许开发者方便地读取、写入和删除Cookie,...

    jquery.editable-select

    9. **示例和文档**:为了更好地理解和使用 `jquery.editable-select`,开发者应参考官方文档和示例代码,这些通常包括如何初始化插件、设置选项、响应事件等。 通过以上知识点,我们可以看出 `jquery.editable-...

    jquery-easyui-1.7.0.zip官方文档

    此外,文档中还包含了示例代码,通过实际操作加深理解。 四、演示Demo的价值 1. 学习参考:Demo提供了直观的实例,展示了组件的实际效果和用法,开发者可以通过复制和修改这些示例,快速创建自己的应用。 2. 测试...

    Jquery.jqprint-0.3.js

    首先,我们需要在HTML文档中引入jQuery库和jQuery.jqprint-0.3.js插件。例如: ```html &lt;script src="jquery.min.js"&gt; &lt;script src="jquery.jqprint-0.3.js"&gt; ``` 在引入这两个脚本后,我们就可以通过JavaScript...

    jQuery-File-Upload

    jQuery是JavaScript的一个库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。jQuery的核心特性包括选择器(用于快速定位DOM元素)、链式调用(方法可以连续执行)和高效的操作DOM。在jQuery-File-Upload中...

    jquery-ui-1.12.1.custom_jqueryui_

    4. **docs** 或者 `README` 文件:可能包含关于如何使用和配置jQuery UI的文档或说明。 5. **license.txt**:许可协议文件,详细说明了使用jQuery UI的法律条款。 使用jQuery UI时,开发者首先需要在HTML文件中引入...

    jquery-ui-1.10.3.custom.zip

    接下来,可以通过jQuery的选择器和方法来初始化和操作UI组件。例如,创建一个基本的对话框: ```javascript $(function() { $( "#dialog" ).dialog(); }); ``` 在这里,`#dialog`是对话框元素的ID,`.dialog()`则...

    jQuery-File-Upload-9.12.1

    9. **API文档与示例**:jQuery-File-Upload提供详尽的API文档和丰富的示例,使得开发者能迅速上手并进行深入开发。 总的来说,jQuery-File-Upload-9.12.1版本是一个全面且稳定的文件上传解决方案,它的强大功能和...

    jquery帮助文档--jquery帮助文档

    **jQuery帮助文档** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画设计和Ajax交互。这个“jQuery帮助文档”包含了所有关于jQuery的核心概念、方法、选择器、事件、动画和插件的...

    jQuery-Waterwheel-Carousel-图片左右滚动切换特效

    jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果,使得开发者能够更高效地编写 JavaScript 代码。 该插件的核心功能在于实现图片的水车式轮播,即图片以类似水车转动的方式进行切换...

    jquery-lightbox-0.5

    6. **DOM操作**:jQuery库擅长于处理DOM(Document Object Model)操作,"jquery-lightbox-0.5"可能会用到这些功能来动态创建、修改和移除DOM元素,如添加灯箱的蒙版层、构建图片容器等。 7. **事件监听和处理**:...

    jquery.uploadify-v2.1.4[修正版]

    在压缩包中,包含的主要文件是`jquery.uploadify-v2.1.4`,这可能是一个包含完整源代码、示例、文档以及必要的CSS和JavaScript文件的文件夹。为了使用这个修正版,你需要将相关文件引入到你的项目中,并根据你的需求...

    前端项目-jquery-circle-progress.zip

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,从而减轻了开发者的工作负担。 在前端开发中,进度条是常见的UI元素,常用于展示任务完成度、数据加载状态或其他需要实时更新进度的...

    jquery-1.8.0.js+jquery-1.8.0-vsdoc.js

    标题 "jquery-1.8.0.js+jquery-1.8.0-vsdoc.js" 提供的是关于jQuery库的两个关键文件,它们是jQuery 1.8.0版本的核心JavaScript文件和对应的Visual Studio文档文件。在.NET开发环境中,尤其是使用Visual Studio 2008...

    jquery-easyui-1.3.2+中文文档

    **jQuery EasyUI 1.3.2 + 中文文档** jQuery EasyUI 是一款基于 jQuery 的前端框架,它为开发者提供了一系列轻量级、易于使用的组件,以帮助快速构建功能丰富的 Web 应用程序。EasyUI 的核心思想是通过简单的 HTML ...

    jquery-easyui-1.3.5

    最后,`jquery-easyui-1.3.5`压缩包中的文件可能包括JavaScript库文件(如`jquery.easyui.min.js`)、CSS样式文件(如`easyui.css`)、图像资源文件(如图标)以及可能的示例和文档。开发者解压后可以直接引用这些...

    jquery-1.4.2-vsdoc.js/jquery-1.4.4-vsdoc.js

    在针对Visual Studio的开发环境中,jQuery提供了vsdoc.js文件,这是一个特殊的文档文件,为开发人员在IDE内提供代码提示和帮助。本文将深入探讨jQuery 1.4.2和1.4.4版本的vsdoc.js文件,解析其中的关键知识点。 一...

    jquery-ui-1.8.6.custom

    压缩包内的"index.html"文件通常是示例页面或文档的入口,它展示了如何在实际项目中引入和使用JQuery UI。通过查看这个文件,我们可以学习到如何正确地链接CSS样式表和JavaScript库,以及如何初始化和操作各个组件。...

    jquery-1.7.2-vsdoc.js

    在编程领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。而`jquery-1.7.2-vsdoc.js`这个文件则是jQuery针对Visual Studio开发环境特别设计的文档文件,为...

    jquery-1.7.2-vsdoc文件jquery-1.8.0-vsdoc 未找到

    在JavaScript的世界里,jQuery是一个非常流行的库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。这里我们关注的是jQuery的版本及其与Visual Studio的集成,特别是关于`vsdoc`文件。`jQuery-1.7.2-vsdoc...

Global site tag (gtag.js) - Google Analytics