05_jQuery函式的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_jQuery核心函式</title>
</head>
<body>
<div>
<button id="btn">測試</button>
<br/>
<input type="text" name="msg1"/><br/>
<input type="text" name="msg2"/><br/>
</div>
<!--
1. 作為一般函式呼叫: $(param)
1). 引數為函式 : 當DOM載入完成後,執行此回撥函式
2). 引數為選擇器字串: 查詢所有匹配的標籤, 並將它們封裝成jQuery物件
3). 引數為DOM物件: 將dom物件封裝成jQuery物件
4). 引數為html標籤字串 (用得少): 建立標籤物件並封裝成jQuery物件
2. 作為物件使用: $.xxx()
1). $.each() : 隱式遍歷陣列
2). $.trim() : 去除兩端的空格
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求1. 點選按鈕: 顯示按鈕的文字, 顯示一個新的輸入框
需求2. 遍歷輸出陣列中所有元素值
需求3. 去掉" my atguigu "兩端的空格
*/
/*需求1. 點選按鈕: 顯示按鈕的文字, 顯示一個新的輸入框*/
//1). 引數為函式 : 當DOM載入完成後,執行其中的函式 回撥函式
$(function () {
//2). 引數為選擇器(selector)字串: 查詢所有匹配的標籤, 並將它們封裝成jQuery物件
var $btn = $("#btn")
$btn.click(function () {
//顯示按鈕的文字
//this就是發生事件的dom元素物件(也就是button)
//3). 引數為DOM物件: 將dom物件封裝成jQuery物件
var text = $(this).html()
alert(text)
//顯示一個新的輸入框
//4). 引數為html標籤字串 (用得少): 建立標籤物件並封裝成jQuery物件
$('<input type="text" name="msg3" /><br />').appendTo('div')
})
})
/*需求2. 遍歷輸出陣列中所有元素值*/
var arr = [123, 'atguigu', true]
// 1). $.each() : 隱式遍歷陣列
$.each(arr, function (index, item) {
console.log('第' + (index + 1) + '個元素的值為' + item)
})
/*需求3. 去掉" my atguigu "兩端的空格*/
var str = " my atguigu "
// 2). $.trim() : 去除兩端的空格
console.log(str.trim() === 'my atguigu') //true
console.log($.trim(str) === 'my atguigu') //true
</script>
</body>
</html>
相關文章
- 函式: 函式是怎麼使用的?函式
- 使用bind()函式的產生的函式用作建構函式this的指向函式
- Shell 函式的使用函式
- Thunk函式的使用函式
- Generator 函式的使用函式
- LNNVL函式的使用函式
- round函式與trunc函式的使用方法函式
- 如何使用函式指標呼叫類中的函式和普通函式函式指標
- 高階函式的使用函式
- tap函式的日常使用函式
- SQL CHARINDEX函式的使用SQLIndex函式
- perl printf函式的使用函式
- Oracle 分析函式的使用Oracle函式
- 第五篇 匿名函式、內建函式、import的使用、包的使用函式Import
- 何時使用函式表示式與函式宣告函式
- 函式索引使用細節——自定義函式的索引化函式索引
- edge函式使用函式
- 【Java】函式使用Java函式
- pipe函式使用函式
- 02_函式定義及使用函式函式
- GO 的匿名函式使用注意Go函式
- php增量Hash函式的使用PHP函式
- JVM鉤子函式的使用JVM函式
- python函式的基本使用Python函式
- Django中F函式的使用Django函式
- Vue中render函式的使用Vue函式
- perl 中glob函式的使用函式
- oracle to_char函式的使用Oracle函式
- flex中getDefinitionByName 函式的使用Flex函式
- 幾個常用函式的使用函式
- MySQL concat函式的使用MySql函式
- 【函式】Oracle中聚合函式rank()使用方法函式Oracle
- Spark Sql 函式使用SparkSQL函式
- Grouping函式使用函式
- exe等函式使用函式
- Oracle over()函式使用Oracle函式
- 索引中使用函式索引函式
- sqlserver DATEPART函式使用SQLServer函式