Jquery重新学习之一[加载与属性html(),text(),val()]
一:Jquery加载方式:
1:首先页面加载时马上响应JS代码如下运行(不一定要等所有的JS和图片加载完毕,就可以执行方法):
$(document).ready(function(){ });
另一种简单写法:
$(function () { })
2:当然有些必须要等到所有元素都加载完才可以执行JS方法,可以如下面这种写法:
$(window).load(function() {
$("#btn-upload").click(function(){
uploadPhotos();
});
});
3:还有一种是DOM元素加载之前执行Jquery代码:
<script type="text/javascript">
(function() {
alert("DOM还没加载哦!");
})(jQuery)
</script>
二:常见属性.html()、.text()、.val()用法:
1:读值
.html()用为读取和修改元素的HTML标签[.html()方法使用在多个元素上时,只读取第一个元素]; .text()用来读取或修改元素的纯文本内容[.text()方法不能使用在表单元素上,应用在多个元素上时,将会读取所有选中元素的文本内容], .val()用来读取或修改表单元素的value值[val()是用来读取表单元素的"value"值,比如读取Div的val()则为空,只能使用在表单元素上,只能读取第一个表单元素的"value"值]。
实例:
<div id="My_Div">
踏浪帅空间(www.cnblogs.com/wujy)
</div>
<div id="My_TwDiv">
<p>带html标签</p>
</div>
<div>
<input id="My_input" type="text" value="踏浪帅"/>
</div> $("#My_Div").text();-->踏浪帅空间(www.cnblogs.com/wujy) $("#My_TwDiv").html();--><p>带html标签</p> $("#My_Div").val();-->(为空) $("#My_input").val();-->踏浪帅
2:写值 .text([val|fn])、.html([val|fn])、.val([val|fn|arr])其中参数val为常量,fn为方法,arr则为数组
2.1 实例.text([val|fn])
$(function () { $("#My_Div").text("这边是text()"); $("#My_TwDiv").text(function (n) { return "这是第一个DIV" + n }); })
2.2 实例.html([val|fn])
$(function () { $("#My_Div").html("<p>这边是Html()</p>"); $("#My_TwDiv").html(function (n) { return "这是第一个html" + n }); })
2.3 实例.val([val|fn|arr])
2.3.1 val设定文本框的值
html: <input id="My_input" type="text"/> $(function () { $("#My_input").val("踏浪帅"); })
2.3.2 fn设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
2.3.3 arr设定一个select和一个多选的select的值
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2 $("#single").val("Single2"); //单选框选中
$("#multiple").val(["Multiple2", "Multiple3"]); //复选框两个选中
$("input").val(["check2", "radio1"]); //value等于check2跟radio1为选中状态
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;
Jquery重新学习之一[加载与属性html(),text(),val()]的更多相关文章
- 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)
一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范. 1.AMD(Asy ...
- 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- 使用jQuery实现图片懒加载原理
原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...
- 【 js 模块加载 】【源码学习】深入学习模块化加载(node.js 模块源码)
文章提纲: 第一部分:介绍模块规范及之间区别 第二部分:以 node.js 实现模块化规范 源码,深入学习. 一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须 ...
- cesium 学习(五) 加载场景模型
cesium 学习(五) 加载场景模型 一.前言 现在开始实际的看看效果,目前我所接触到基本上都是使用Cesium加载模型这个内容,以及在模型上进行操作.So,现在进行一些加载模型的学习,数据的话可以 ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- jquery实现图片预加载
使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...
- 【Jquery mobile】动态加载ListView 转
[Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...
随机推荐
- CodeForces - 1017C The Phone Number
题面在这里! 一开始有一种构造猜想,可以把答案降到 sqrt(N) 级别. 考虑把 {1,2,...,n} 分成 sqrt(N) 段,每一段是连续的sqrt(N)个数.然后我们倒着把每一段数放上. 比 ...
- unix-软件安装
检查软件是否已经安装 rpm -qa|grep 软件标识名 在线安装软件 yum -y install 软件标识名
- asp.net 链接数据库ADO.NET
web.config <configuration> <connectionStrings> <add name="constr" connectio ...
- Windows系统默认调试器设置
Windows系统默认调试器设置 1.使用运行打开drwtsn32 -i 注册华生医生到注册表如图: 2.使用运行打开drwtsn32可以进行一些常用的设置如图: 3. 注册表设置: HKEY_LOC ...
- MySQL审计功能
http://blog.itpub.net/29733787/viewspace-1604392/
- 源码管理--llorch的Visual Studio基本教程(四)
通用的演示样例说明: 本系列博客仅仅讨论工具的基础,不讨论不论什么语言. 甚至不讨论快捷键:-) 能够用鼠标就完毕本教程 IDE默认指代的是Visual Studio 2013 Community E ...
- CISC RISC架构
参考: http://capacity.blog.163.com/blog/static/20866413120129261737102/ http://cs.stanford.edu/people/ ...
- Java隐藏手机号中间四位,隐藏身份证中间数字
原文:https://blog.csdn.net/yuanquanl/article/details/53519577 public static void main(String[] args) { ...
- python 将有序list打乱
利用random模块下的shuffle函数就能够实现. 关于官网对于shuffle,我感觉说法上有一定的误解. 上面是官网的解释,他说会返回打乱的list,事实上什么也没有返回. 能够看到返回的是No ...
- Silverlight:《Pro Silverlight5》读书笔记 之 XAML
XAML Properties and Events in XAML Simple Properties and Type Converters To bridge the gap between s ...