前端基础--jquery操作元素

1.事件

1.1事件的绑定：

jquery的事件绑定方式1： jquery对象.事件(function){}

例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul><li>111</li><li>222</li><li>333</li>
</ul>
<button>添加</button>
<script>$("ul li").click(function () {alert("ok")})
</script>
</body>
</html>

　　jquery的事件绑定on方法： jquery对象.on("事件",function()){}

例子：

 $("button").on("click",function () {alert("这是一个添加按钮")})

1.2.事件委派

事件委派就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul><li>111</li><li>222</li><li>333</li>
</ul>
<button>添加</button>
<script>$("ul li").click(function () {alert("ok")})$("button").on("click",function () {var $li=$("<li>");$li.html("444");$("ul").append($li)})
</script>
</body>
</html>

上述代码中，如果不委派事件，新添加的html标签是“444”点击是不会触发事件的

需要绑定个事件，这样点击新添加的444就同样也会出现弹出“ok”的窗口。

<script>$("ul li").click(function () {alert("ok")})$("button").on("click",function () {var $li=$("<li>");$li.html("444");$("ul").append($li)})$("ul").on("click","li",function () {      #绑定个事件alert("ok")       })
</script>

ready方法：

当事件定义在页面的上方的时候，导致绑定事件失败。这个时候可以使用ready方法----当整个页面加载完成，在绑定方法。

例子：

方法1：
$(function () {$("button").click(function () {var $li=$("<li>"); //  <li></li>$li.html("444");$("ul").append($li)});方法2：
$(document).ready(function () {$("button").click(function () {var $li=$("<li>"); //  <li></li>$li.html("444");$("ul").append($li)})

1.3.事件切换

hover事件：

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.test{width: 200px;height: 200px;background-color: wheat;}</style>
</head>
<body><div class="test"></div>
</body>
<script src="jquery.min.js"></script>
<script>
//    function enter(){//        console.log("enter")
//    }
//    function out(){//        console.log("out")
//    }
// $(".test").hover(enter,out)
$(".test").mouseenter(function(){console.log("enter")
});$(".test").mouseleave(function(){console.log("leave")});</script>
</html>

2.属性操作

--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})

3.each循环

each的遍历循环方式1： $.each(obj,function)

var arr=[11,2,343];
var obj={"name":"yuan","age":"322"};$.each(obj,function (i,v) {console.log(i,v)
});$.each(arr,function (i,v) {console.log(i,v)
})

each的遍历循环方式2：$("").each(function)

$("p").each(function (i) {console.log(i);if(i==1){$(this).css("color","red")}console.log($(this).html())
})

4.文档节点操作

//创建一个标签对象$("<p>")//内部插入$("").append(content|fn)      ----->$("p").append("<b>Hello</b>");$("").appendTo(content)       ----->$("p").appendTo("div");$("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");$("").prependTo(content)      ----->$("p").prependTo("#foo");//外部插入$("").after(content|fn)       ----->$("p").after("<b>Hello</b>");$("").before(content|fn)      ----->$("p").before("<b>Hello</b>");$("").insertAfter(content)    ----->$("p").insertAfter("#foo");$("").insertBefore(content)   ----->$("p").insertBefore("#foo");//替换$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");//删除$("").empty()$("").remove([expr])//复制$("").clone([Even[,deepEven]])

5.动画效果

5.1显示隐藏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script><script>$(document).ready(function() {$("#hide").click(function () {$("p").hide(1000);});$("#show").click(function () {$("p").show(1000);});//用于切换被选元素的 hide() 与 show() 方法。
    $("#toggle").click(function () {$("p").toggle();});
})</script><link type="text/css" rel="stylesheet" href="style.css">
</head>
<body><p>hello</p><button id="hide">隐藏</button><button id="show">显示</button><button id="toggle">切换</button></body>
</html>

View Code

5.2滑动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script><script>$(document).ready(function(){$("#slideDown").click(function(){$("#content").slideDown(1000);});$("#slideUp").click(function(){$("#content").slideUp(1000);});$("#slideToggle").click(function(){$("#content").slideToggle(1000);})});</script><style>#content{text-align: center;background-color: lightblue;border:solid 1px red;display: none;padding: 50px;}</style>
</head>
<body><div id="slideDown">出现</div><div id="slideUp">隐藏</div><div id="slideToggle">toggle</div><div id="content">helloworld</div></body>
</html>

View Code

5.3淡入淡出

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script><script>$(document).ready(function(){$("#in").click(function(){$("#id1").fadeIn(1000);});$("#out").click(function(){$("#id1").fadeOut(1000);});$("#toggle").click(function(){$("#id1").fadeToggle(1000);});$("#fadeto").click(function(){$("#id1").fadeTo(1000,0.4);});
});</script></head>
<body><button id="in">fadein</button><button id="out">fadeout</button><button id="toggle">fadetoggle</button><button id="fadeto">fadeto</button><div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div></body>
</html>

View Code

5.4回调函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script></head>
<body><button>hide</button><p>helloworld helloworld helloworld</p><script>$("button").click(function(){$("p").hide(1000,function(){alert($(this).html())})})</script>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/yxwang/p/7772608.html

前端基础--jquery操作元素相关推荐

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
jQuery框架学习第四天：使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
[转帖]jQuery框架学习第四天：使用jQuery操作元素的属性与样式
一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
【jQuery学习】—jQuery操作元素位置
[jQuery学习]-jQuery操作元素位置一.position方法作用:返回相对某个元素的偏移量格式:元素.position() 返回值包含top属性和left属性的对象如果祖先元素中没有 ...
[乐意黎转载]从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
jQuery操作元素和DOM
一.操作元素 Ⅰ.操作文本内容 ①语法text() ②替换文本内容 ③以纯文本方式实现, 不能是标签 <!DOCTYPE html> <html lang="en" ...
jQuery操作元素属性、jQuery循环
jQuery操作元素属性.jQuery循环 1.prop() 取出或设置某个属性的值 2.html() 取出或设置html内容 3. 手风琴效果实现: 4.jQuery的循环: 1.prop() 取出 ...
DOM获取元素、事件基础、操作元素、节点操作
什么是DOM? 文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML 或者XML)的标准编程接口. W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式. DO ...
WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...

前端基础--jquery操作元素

前端基础--jquery操作元素相关推荐

最新文章

热门文章