jQuery HTML

1.获得或设置内容 - text()、html() 以及 val()
  三个简单实用的用于 DOM 操作的 jQuery 方法:
    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容(包括 HTML 标记)
    val() - 设置或返回表单字段的值
2.获取或设置属性 - attr()
  jQuery attr() 方法用于获取属性值。
  jQuery attr() 方法也用于设置/改变属性值。
3.jQuery append() 方法
  jQuery append() 方法在被选元素的结尾插入内容。
4.jQuery prepend() 方法
  jQuery prepend() 方法在被选元素的开头插入内容。
5.通过 append() 和 prepend() 方法添加若干新元素
  在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。
  不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML,或者通过 JavaScript 代码和 DOM 元素。
  在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。
  然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效)
    function appendText()
    {
      var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
      var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
      var txt3=document.createElement("p"); // 以 DOM 创建新元素
      txt3.innerHTML="Text.";
      $("p").append(txt1,txt2,txt3); // 追加新元素
    }
6.jQuery after() 和 before() 方法
  jQuery after() 方法在被选元素之后插入内容。
  jQuery before() 方法在被选元素之前插入内容。
7.jQuery remove() 方法
  jQuery remove() 方法删除被选元素及其子元素。
    $("#div1").remove();
8.jQuery empty() 方法
  jQuery empty() 方法删除被选元素的子元素。
    $("#div1").empty();
9.过滤被删除的元素
  jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
  该参数可以是任何 jQuery 选择器的语法。
  下面的例子删除 class="italic" 的所有 <p> 元素
    $("p").remove(".italic");
10.jQuery addClass() 方法
  向被选元素添加一个或多个类
  在添加类时,您也可以选取多个元素
11.jQuery removeClass() 方法
  从被选元素删除一个或多个类
12.jQuery toggleClass() 方法
  对被选元素进行添加/删除类的切换操作
13.jQuery css() 方法
  css() 方法设置或返回被选元素的一个或多个样式属性。
14.jQuery width() 和 height() 方法
  width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
  height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
15.jQuery innerWidth() 和 innerHeight() 方法
  innerWidth() 方法返回元素的宽度(包括内边距)。
  innerHeight() 方法返回元素的高度(包括内边距)。
16.jQuery outerWidth() 和 outerHeight() 方法
  outerWidth() 方法返回元素的宽度(包括内边距和边框)。
  outerHeight() 方法返回元素的高度(包括内边距和边框)。
  outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
  outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
17.jQuery - 更多的 width() 和 height()
  返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:
    $("button").click(function(){
      var txt="";
      txt+="Document width/height: " + $(document).width();
      txt+="x" + $(document).height() + "\n";
      txt+="Window width/height: " + $(window).width();
      txt+="x" + $(window).height();
      alert(txt);
    });
  设置指定的 <div> 元素的宽度和高度:
    $("button").click(function(){
    $("#div1").width(500).height(500);
  });

18.jQuery文档操作

方法 描述
addClass() 向匹配的元素添加指定的类名。
after() 在匹配的元素之后插入内容。
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo() 向目标结尾插入匹配元素集合中的每个元素。
attr() 设置或返回匹配元素的属性和值。
before() 在每个匹配的元素之前插入内容。
clone() 创建匹配元素集合的副本。
detach() 从 DOM 中移除匹配元素集合。
empty() 删除匹配的元素集合中所有的子节点。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo() 向目标开头插入匹配元素集合中的每个元素。
remove() 移除所有匹配的元素。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
replaceAll() 用匹配的元素替换所有匹配到的元素。
replaceWith() 用新内容替换匹配的元素。
text() 设置或返回匹配元素的内容。
toggleClass() 从匹配的元素中添加或删除一个类。
unwrap() 移除并替换指定元素的父元素。
val() 设置或返回匹配元素的值。
wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

19.jQuery属性操作

方法 描述
addClass() 向匹配的元素添加指定的类名。
attr() 设置或返回匹配元素的属性和值。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
val() 设置或返回匹配元素的值。

20.jQuery CSS操作

CSS 属性 描述
css() 设置或返回匹配元素的样式属性。
height() 设置或返回匹配元素的高度。
offset() 返回第一个匹配元素相对于文档的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一个匹配元素相对于父元素的位置。
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
width() 设置或返回匹配元素的宽度。
时间: 2024-10-12 17:46:27

jQuery HTML的相关文章

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops

Jquery基础总结

jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. <ul> <li id=&quo

初识jQuery

jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:

zepto与jquery冲突的解决

问题出现的背景: 在light7框架下搭建的触屏版项目中,要拓展一个投票系统,其中投票系统有一个比较完善的上传组件,但是此组件是依赖zepto的,而原来的项目是依赖jQuery的,所以就会遇到冲突的问题: 解决方法1: jquery有一个方法叫noConflict() ,可以把jquery的$改掉. var jq=$.noConflict(); 这个时候用jq来代替jquery的$吧. 解决方法2: zepto的符号改掉 window.zp=window.Zepto = Zepto 在zepto

jQuery父级以及同级元素查找的实例

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(

jQuery EasyUI---DataGrid

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../jquery-1.4.2.min.js" ty

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

jQuery $.ajax传递数组的traditional参数传递必须true

出自:http://blog.csdn.net/ojackhao/article/details/24580437 起初我认为traditional:true,可有可无,但是后来不用traditional的时候,发现后台无法获取selectUsers的值,那么可以肯定的是traditional默认值是false.当提交的参数是数组( {selectUsers:[value,value,value]} ),如果是false的话,则提交时会是"selectUsers[]=value&sele

页面滚动图片等元素动态加载插件jquery.scrollLoading.js

如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的就不用加载了.这样还可以在一定程度上节省服务器资源.该插件作者的网页将该插件的功能和使用方法描述的非常详细,这里把最一般最普遍的使用情况给大家展现一下. 插件作者:http://www.zhangxinxu.com/ 首先我们需要加载jQuery库和本插件js文件. (jquery.scrollLo