jquery内的元素获取和设置class、value、text

最新推荐文章于 2023-06-13 19:27:35 发布

zhangfulilili

最新推荐文章于 2023-06-13 19:27:35 发布

阅读量5.1k

点赞数

分类专栏：分享文章标签： jquery

本文链接：https://blog.csdn.net/zhangfulilili/article/details/79081864

版权

分享专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、jquery获取节点及获取一些属性
//一下是js里面的代码
$(function(){
//$para $符说明变量是jquery的对象
// 获取<p>节点
var $para = $("p");
// 获取第二个<li>元素节点
var $li = $("ul li:eq(1)");
// 输出<p>元素节点属性title
var p_txt = $para. attr("title");
// 获取<ul>里的第二个<li>元素节点的属性title
var ul_txt = $li.attr("title");
// 输出第二个<li>元素节点的text
var li_txt = $li.text();

alert(ul_txt);
alert(li_txt);
alert(p_txt);
});

//以下是body里面的代码
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
二、创建节点
//一下是js里面的代码
$(function(){
// 创建第一个<li>元素
var $li_1 = $("<li>111</li>");
// 创建第二个<li>元素
var $li_2 = $("<li>222</li>");
// 获取<ul>节点。<li>的父节点
var $parent = $("ul");
// 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_1);
// 可以采取链式写法：$parent.append($li_1).append($li_2);
$parent.append($li_2);
});
//以下是body里面的代码
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
三、删除节点
//一下是js里面的代码
$(function () {
// 获取第二个<li>元素节点后，将它从网页中删除。
$("ul li:eq(1)").remove();
});
//以下是body里面的代码
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
四、复制节点
//一下是js里面的代码
$(function(){
$("ul li").click(function(){
// 复制当前点击的节点，并将它追加到<ul>元素
//clone()方法复制appendTo("ul")追加方法
//要想复制后的继续能够复制就在clone()里面加上true
//clone(true)
$(this).clone(). appendTo("ul");
})
});
//以下是body里面的代码
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>

五、属性设置（修改、获取、删除）
//一下是js里面的代码
$(function(){
//里面的方法对其他的属性都可以进行设置
//设置<p>元素的属性'title'变为‘选择’用两个参数
$("input:eq(0)").click(function(){
$("p").attr("title","选择.");
});
//获取<p>元素的属性'title'
$("input:eq(1)").click(function(){
alert( $("p").attr("title") );
});
//删除<p>元素的属性'title'
$("input:eq(2)").click(function(){
$("p").removeAttr("title");
});

});

//以下是body里面的代码

<input type="button" value="设置<p>元素的属性'title'"/>
<input type="button" value="获取<p>元素的属性'title'"/>
<input type="button" value="删除<p>元素的属性'title'"/>

<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>

六、样式
//实际上就是修改class来进行元素的样式修改操作

<style type="text/css">
.high{
font-weight:bold; /* 粗体字 */
color : red; /* 字体颜色设置红色*/
}
.another{
font-style:italic;
color:blue;
}
<script type="text/javascript">
//<![CDATA[
$(function(){
//获取样式
$("input:eq(0)").click(function(){
alert( $("p").attr("class") );
});
//设置/修改样式
$("input:eq(1)").click(function(){
$("p").attr("class","high");
});
//追加样式
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
//删除全部样式
$("input:eq(3)").click(function(){
$("p").removeClass();
});
//删除指定样式
$("input:eq(4)").click(function(){
$("p").removeClass("high");
});
//重复切换样式
$("input:eq(5)").click(function(){
$("p").toggleClass("another");
});
//判断元素是否含有某样式
$("input:eq(6)").click(function(){
alert( $("p").hasClass("another") )
alert( $("p").is(".another") )
});
});
//]]>
</script>

<body>
<input type="button" value="输出class类"/>
<input type="button" value="设置class类"/>
<input type="button" value="追加class类"/>
<input type="button" value="删除全部class类"/>
<input type="button" value="删除指定class类"/>
<input type="button" value="重复切换class类"/>
<input type="button" value="判断元素是否含有某个class类"/>

<p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>

七、设置、获取和修改html、text、value值

<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>

<script src="../js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
//获取<p>元素的HTML代码
$("input:eq(0)").click(function(){
alert( $("p").html() );
});
//获取<p>元素的文本
$("input:eq(1)").click(function(){
alert( $("p").text() );
});
//设置<p>元素的HTML代码
$("input:eq(2)").click(function(){
$("p").html("<strong>你最喜欢?</strong>");
});
//设置<p>元素的文本
$("input:eq(3)").click(function(){
$("p").text("你最喜欢?");
});
//设置<p>元素的文本
$("input:eq(4)").click(function(){
$("p").text("<strong>你最喜欢的水果是?</strong>");
});
//获取按钮的value值
$("input:eq(5)").click(function(){
alert( $(this).val() );
});
//设置按钮的value值
$("input:eq(6)").click(function(){
$(this).val("我被点击了!");
});
});

</script>
</head>
<body>
<input type="button" value="获取<p>元素的HTML代码"/>
<input type="button" value="获取<p>元素的文本"/>
<input type="button" value="设置<p>元素的HTML代码"/>
<input type="button" value="设置<p>元素的文本"/>
<input type="button" value="设置<p>元素的文本(带HTML)"/>
<input type="button" value="获取按钮的value值"/>
<input type="button" value="设置按钮的value值"/>
<p title="选择你最喜欢的水果." >
<strong>你最喜欢的水果是?</strong>
</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>

八、value值得获取和编辑

$(function(){
$("#address").focus(function(){
// 地址框获得鼠标焦点
var txt_value = $(this).val();
// 得到当前文本框的值
if(txt_value=="请输入邮箱地址"){
$(this).val("");
// 如果符合条件，则清空文本框内容
}
});
$("#address").blur(function(){
// 地址框失去鼠标焦点
var txt_value = $(this).val();
// 得到当前文本框的值
if(txt_value==""){
$(this).val("请输入邮箱地址");
// 如果符合条件，则设置内容
}
})

$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value=="请输入邮箱密码"){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val("请输入邮箱密码");
}
})
});

<input type="text" id="address" value="请输入邮箱地址"/> <br/><br/>
<input type="text" id="password" value="请输入邮箱密码"/> <br/><br/>
<input type="button" value="登录"/>

zhangfulilili

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery内的元素获取和设置class、value、text

一、jquery获取节点及获取一些属性//一下是js里面的代码$(function(){//$para $符说明变量是jquery的对象// 获取节点 var $para = $("p");// 获取第二个元素节点 var $li = $("ul li:eq(1)"); // 输出元素节点属性title var p_txt = $para.attr("title"); // 获取里
复制链接

扫一扫