当前位置：首页 > news >正文

Jquery重新学习之一[加载与属性html(),text(),val()]

news 来源：原创 2024/5/22 5:06:53

一：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为选中状态