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教程

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<