Web前端技术：JQuery插件基础---引入JQuery，DOM操做（DOM对象与JQuery对象互转，节点的操做，属性操做，元素操做，样式操做，HTML、文本和值操做，CSS操做），事件（简写绑定

时间 2019-12-13

标签 web 前端技术 jquery 插件基础引入 dom 对象节点属性元素样式 html 文本 css 事件简写绑定栏目 HTML 繁體版

原文原文链接

如何引入JQueryjavascript

1*下地址http://jquery.com ，选择production版下载（xxx.min.js）。在项目中配置jQuery，将下载的xxx.min.js放置到项目指定文件夹如JS文件夹，而后在须要应用jQuery的页面使用下面的语句css

<script type=”text/javascript” src=”JS/xxx.min.js”></script>html

2*使用CDN CDN 服务直接获取 jQuery，如；java

<script type=”text/javascript” src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>jquery

简单选择器基础app

1*　jQuery 语法——基础语法：$(selector).action();dom

2*　$(document).ready() 函数——JQuery代码都将写在$(document).ready()函数中。ide

3* 在 JQuery 中提供了强大的选择器用来帮助获取页面上的对象，而且将对象以 JQuery 包装集的形式返回。函数

eg:字体

DOM 操做 - 1基础

**1*　 Dom对象转jQuery对象**

用$()把DOM对象包起来便可

var domObj = document.getElementById('demo');

var jQueryObj = $(domObj);

2* jQuery对象转Dom对象

方法一：[index]

var jQueryObj = $('#demo');

var domObj = jQueryObj[0];

方法二：get(index)

var jQueryObj = $('#demo');

var domObj = jQueryObj.get(0);

DOM 操做 - 2

1* 建立新元素能够用$()函数。示例：将新建的li元素插入到ul中

$(document).ready(function(){

var li_obj = $("<li>黄色</li>");

$('ul').append(li_obj); });

2*插入节点

append() 向匹配的元素内部追加内容（上节示例）

appendTo() 将匹配的元素追加到指定的元素中

prepend() 向匹配的元素内部前置内容

prependTo() 将匹配的元素前置到指定的元素中

after() 在匹配的元素以后插入内容

insertAfter() 将匹配的元素插入到指定的元素的后面

before() 在匹配的元素以前插入内容

insertBefore() 将匹配的元素插入到指定的元素的前面

3*删除节点

remove() 从DOM中删除所匹配的元素，可传参数，后代节点也被删除

detach() 从DOM中删除所匹配的元素，但绑定的事件、附加的数据等会保留下来

empty() 清空节点，清空元素的全部后代元素节点

DOM 操做 - 3属性操做

1*获取元素属性

示例：获取P元素的class属性值，并追加到div中

$(document).ready(function(){

var p_class = $("p").attr("class");

$('div').append(p_class); });

2*设置元素属性

示例：设置div的class值

$(document).ready(function(){ $("div").attr("class","demo"); });

3*删除元素属性——用removeAttr()方法来实现删除元素属性。

示例：删除div的class

$(document).ready(function(){ $("div").removeAttr("class"); });

DOM 操做 - 4样式操做

1*追加样式

用addClass()方法来追加样式。示例：为div追加一个新样式another

$("div").addClass("another");

2*移除样式

用removeClass()方法来移除样式。示例：移除div的another样式

$("div").removeClass("another");

DOM 操做 - 5HTML、文本和值

1*html()——用来获取或设置所匹配元素中的HTML内容。

示例：设置div中的HTML内容

$("div").html("<span>shiyan</span>");

2*text()——用来获取或设置所匹配元素中的文本内容。

示例：设置div中的文本内容

$("div").text("shiyan");

3*val()——用来设置和获取元素的值。

示例：设置输入框的值

$("input").val("shiyan");

DOM 操做 - 6CSS操做

1*css()——用于获取或设置元素的样式属性。

示例：为div设置边框和高度属性

$('div').css({"border":"1px solid red","height":"100px"});

2*height()、width()——分别用于获取元素的高度和宽度。

事件

1*简写绑定事件

事件类型：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress等

示例：为li元素简写绑定click事件

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript" src="xx.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("ul li").click(function(){

$(this).clone().appendTo('ul');

});

});

</script>

</head>

<body>

<ul>

<li>blue</li>

<li>white</li>

<li>red</li>

</ul>

</body>

</html>

2* 合成事件hover()

用于模拟光标悬停事件。

示例：当鼠标移动到li上时字体大小变成24px，移开变为14px

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript" src="xxjquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("ul li").hover(function(){

$(this).css({"font-size":"24px"});

},function(){

$(this).css({"font-size":"14px"});

});

});

</script>

</head>

<body>

<ul>

<li>blue</li>

<li>white</li>

<li>red</li>

</ul>

</body>

</html>

3* 动画

①　show()和hide()

分别控制元素显示和隐藏。

示例：鼠标放上类名为title的div上将隐藏此div的下一个div，移出则显示

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript" src="xxjquery.min.js"></script>

<style>

.title {

position:relative;

border:1px solid red;

height:100px;

width:200px;

}

</style>

<script type="text/javascript">

$(document).ready(function(){

$(".title").hover(function(){

$(this).next().hide();

},function(){

$(this).next().show();

});

});

</script>

</head>

<body>

<div class="title">shiyan</div>

<div>welcome to shiyan!</div>

</body>

</html>

②　animate()

用来实现自定义动画。

示例：3000毫秒内left变成500

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript" src="xxjquery.min.js"></script>

<style>

.title {

position:relative;

border:1px solid red;

height:100px;

width:200px;

}

</style>

<script type="text/javascript">

$(document).ready(function(){

$(".title").animate({left:"500px"},3000);

});

</script>

</head>

<body>

<div class="title">shiyan</div>

</body>

</html>

相关文章

相关标签/搜索

Update误操做

操做篇（2）

jQuery Mobile 教程

Hibernate教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<