jquery尺寸和jQuery设置和获取内容方法

一、jquery尺寸

jQuery 提供多个处理尺寸的重要方法:

width()    设置或返回元素的宽度(不包括内边距、边框或外边距),括号中可填数值宽度参数,无单位

height()   设置或返回元素的高度(不包括内边距、边框或外边距),括号中可填数值高度参数,无单位

innerWidth()     返回元素的宽度(包括内边距)

innerHeight()    返回元素的高度(包括内边距)

outerWidth()     返回元素的宽度(包括内边距和边框)

outerHeight()    返回元素的高度(包括内边距和边框)

outerWidth(true) 返回元素的宽度(包括内边距、边框和外边距)

outerHeight(true)返回元素的高度(包括内边距、边框和外边距)

还可以获取HTML文档和浏览器窗口的宽高:

$(window).width()    //获取当前浏览器窗口的宽度

$(window).height()   //获取当前浏览器窗口的高度

$(document).width()  //获取HTML文档(body)的宽度

$(document).height() //获取HTML文档(body)的高度

二、jquery的设置和获取方法

text() -  设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容(包括 HTML 标记)

val() -  设置或返回表单value的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <input  type="text" value="请输入内容"/>
    <div><a href="##">点我呀</a></div>
</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(‘input‘).val(‘内容被修改了‘); //设置表单的value属性值
    console.log($(‘input‘).val()); //获取表单的value属性值

    $(‘div‘).html(‘<a href="###">点击我啊!!!!</a>‘); //设置div标签的内容
    console.log($(‘div‘).html()); //获取div标签的内容

    $(‘div‘).text(‘<a href="###">点击我啊!!!!</a>‘); //设置div标签的文本内容
    console.log($(‘div‘).text()); //获取div标签的文本内容
</script> 

二、jQuery设置和获取内容方法

时间: 2024-08-29 05:00:28

jquery尺寸和jQuery设置和获取内容方法的相关文章

223 jQuery 尺寸、位置操作

? jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下. 1.4.1 jQuery 尺寸操作 ? jQuery 尺寸操作包括元素宽高的获取和设置,且不一样的API对应不一样的盒子模型. 语法 代码演示 <body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("

jQuery 尺寸:处理元素和浏览器窗口的尺寸

jQuery 尺寸 通过 jQuery,很容易处理元素和浏览器窗口的尺寸. jQuery 尺寸方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery 尺寸 jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框

前端开发中通过js设置cookie的一组方法

我们在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. 此次文章中的方法是在前端开发工作中自己随手写的一组通过js设置与获取cookie的方法,能够应用在多说情况下,没做细挖与深究. js方法的完整代码如下: var cookie = { set:function(key,val,time){//设置cookie方法 var date=new Date(); //获取当前时间 var expiresDays=time; //将d

jQuery - 设置获取内容和属性

获取选中select :$("#id option:selected").val(); 自定义radio:    $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio:           $("input[name='sex']:checked").val() 设置input不能编辑:$("#cashNum&

jquery - 设置/获取内容和属性

一般我们会遇到给某个元素添加或更改原有的文字: 1. 设置/获取内容 - text().html() 以及 val() 设置内容常用的三个方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 eg: 通过 text().html() 以及 val() 方法来设置/获取内容: $("#btn1").click(function(){ $("#test1").t

jQuery设置和获取HTML、文本和值

jQuery设置和获取HTML.文本和值 按 Ctrl+C 复制代码 <script type="text/javascript"> //<![CDATA[ $(function(){ //获取<p>元素的HTML代码 $("input:eq(0)").click(function(){ alert( $("p").html() ); }); //获取<p>元素的文本 $("input:eq(1

jQuery - 获取内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. DOM = Document Object Model(文档对象模型) DOM 定义访问 HTML 和 XML 文档的标准: "W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容.结构以及样式." 获得内容 - text()

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的元素代码如下: $("#objid",document.frames('iframename').document) 显示iframe中body元素的内容. $(document.getElementById('iframeId').contentWindow.document.body)

jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()

1. html()方法: 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的html内容. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jQ