一、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>
<!-- 引入jQuery -->
<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="登录"/>
//一下是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>
<!-- 引入jQuery -->
<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="登录"/>