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

jquery节点操作+运算符

2018-01-04 18:09 218 查看

运算符：运算符运算符运算符

var num1=123;

var num2=123;
console.log("==",num1==num2);
console.log("===",num1===num2);//比较的是值和数据类型

克隆-clone-----=============-------------------=================================---------- ----------============克隆

<html>

<head>
<meta charset="utf-8" />
<style>
.selected{
color: red;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("body").append($("p:first").clone(true));
});
$("p").click(function() {
$(this).toggleClass("selected");//切换使用的类样式
});
});
</script>
</head>

<body>

<p>点击本段落可以增加文本的大小。事件处理器同样被复制到新的段落。</p>
<button>复制每个 p 元素，然后追加到 body 元素</button>

</body>

</html>

切换事件-=-=----------------================--------------------====================================================切换事件

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
.d1{
background: yellow;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script>
function aa(){
$("div").removeClass("d1");
}
function bb(){
$("div").addClass("d1");
}
function ab(){
$("div").toggleClass("d1"); //d1样式来回切换
}

</script>
</head>
<body>
<button onclick="aa()">红色</button>

<button onclick="bb()">黄色</button>
<button onclick="ab()">颜色切换</button>
<div class="d1">

</div>
</body>

</html>

节点复制=-=-=-======================================-------------------===========================--------------节点复制

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.p1{
color: red;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).toggleClass("p1");

})

})

function fz(){
var p1= $("p:first").clone(true); //true-->复制事件
$("body").append(p1);
}
</script>
</head>
<body>
<p>
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
</p>
<button onclick="fz()">复制节点p</button>
</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航