您的位置：首页 > Web前端 > JQuery

JQuery中的节点操作中的一些常用的属性

2018-06-19 18:51 453 查看

1.val()属性：

<script type="text/javascript" src="新建文件夹/jquery-3.3.1.js"></script><!-- -->
<script type="text/javascript">
$(function(){
alert($('#wbk').val()); //val()获取表单元素的value值,这个元素可以是文本框或下拉列表
$('#wbk').val('李四');  //val('')里面有参数 是设置value的值

alert($('#sel').val());
$('#sel').val(1); //val(value)有参数，这是某个表单元素的value值，如果这个元素是下拉列表则设置下拉列表的选中状态
});
</script>
</head>
<body>
<form>
    <input type="text" name="" id="wbk" value="张三">
    <select id="sel">
<option value="0">请选择班级</option>
<option value="1">601</option>
<option value="2">602</option>
    </select>
</form>
</html>

2.text属性和HTML属性：

<script type="text/javascript" src="新建文件夹/jquery-3.3.1.js"></script><!-- -->
<script type="text/javascript">
$(function(){
alert($('#div1').text());
alert($('#div1').html());
alert($('#div2').text()); //获取id为div2这个元素中的所有内容（不包括页面中所有的HTML代码）
alert($('#div2').html());//获取id为div2这个元素的内容（包括页面中所有的HTML代码）
$('#div3').html('<a href="#">第三个div</a>');//设置一段HTML代码到id为div3的这个元素中（html编译后的内容）
$('#div4').text('<a href="#">第三个div</a>'); //这是一段html代码文本到id为div4的这个元素中（html代码不进行编译）
});
</script>
</head>
<body>
<div id="div1">第一个DIV</div>
<div id="div2"><a href="#">第二个div</a></div>
<div id="div3"></div>
<div id="div4"></div>
</html>

3.Class属性值：

<style type="text/css">
.div1{
background-color: red;
}
.div2{
color: blue;
}
</style>
<script type="text/javascript" src="新建文件夹/jquery-3.3.1.js"></script><!-- -->
<script type="text/javascript">
$(function(){
alert("添加一个class到DIV中");
$('#div1').addClass("div1"); //向id为div1的元素的class属性中追加值div1
$('#div1').addClass("div2");
alert("删除class");
$('#div1').removeClass("div1");//移除id为div1的元素的class属性值div1
alert($('#div1').hasClass("div2"));//检查匹配的元素是否拥有指定的类 ,如果有则返回true，没有返回false
$('#div1').toggleClass('div1');//从匹配的元素中添加或删除一个类,判断有没有这个类存不存在。
        //如果没有这个类，则添加，如果有，则移除
});
</script>
</head>
<body>
<div id="div1">第一个DIV</div>  <!-- class="div1" -->
</html>

4.attr属性和removeattr属性：

<script type="text/javascript" src="新建文件夹/jquery-3.3.1.js"></script><!-- -->
<script type="text/javascript">
//attr 对页面元素的属性进行操作
$(function(){
alert($('#imgs').attr('src'));//获取ID为imgs的这个元素的src属性的值
$('#imgs').attr('src','2.jpg');//设置ID为imgs的这个元素的src属性的值，实现图片的切换
$('#wbk').attr('value','李四');
// alert($('#lj').value);  获取的是JQuery对象不能使用DOM对象的方法
alert($('#lj').val()); //只能获取表单元素的value,所以没有值
alert($('#lj').attr('value'));//可以获取任意元素的value不管这个元素是否可以使用value，也可获取任意属性的值
// $("#div1").attr('class','div1');//也可操作class
alert($("#cb").attr("checked"));//值为false
$("#cb").attr("checked",true); //通过attr方法选中复选框 ，选中为true，未选中为false
$("#imgs").removeAttr("src"); //将img的是src属性删除，从每一个匹配的元素中删除一个属性
});
</script>
</head>
<body>
<img src="1.jpg" id="imgs"></br>
<input type="text" name="" id="wbk" value="张三">
<a value="lianjie" id="lj">连接</a></br>
<input type="checkbox" name="" id="cb" >
</html>

这是一些常用的属性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航