1つのjQueryのコア機能
*省略形：jQueryの機能（$ / jQueryの）
* jQueryライブラリ対外直接エクスポージャーは、$ / jQueryのです
* jQueryライブラリを導入した後、あなたは直接$を使用することができます
*機能を使用する：$（XXX）
*オブジェクトが使用して：$ .XXX（）
1.1理解
つまり：$またはjQueryの
別のjQueryは、私たちはコールすることは一般的な関数呼び出しとして使用することができ、グローバル関数を再定義し、異なる機能のパラメータタイプ/フォーマットを渡すと、ツールケース$であるオブジェクトへのメソッド呼び出しとして定義することができる、完全に異なっていますオブジェクト。
一般的な関数呼び出しとして1.2：$（パラメータ）
1）の関数としてパラメータ：DOMが完了すると、このコールバック関数を実行します。例：$（楽しいです）
2）パラメータ選択（（セレクタ））列：すべての一致するタグを検索し、jQueryオブジェクトにそれらをカプセル化します。例：$（ "＃のDIV1"）
3）DOMオブジェクトパラメータ：DOM jQueryオブジェクトにパッケージオブジェクト。例：$（div1Ele）
より少ないと4）パラメータのHTMLタグ文字列（）：カプセル化されたオブジェクトとラベルjQueryオブジェクトを作成します。例：$（ "の<div>"）
使用してオブジェクトとして1.3：$ .XXX（）
1）送信方法AJAXリクエスト：
$アヤックス（）、$に.get（）、$。ポスト（）...
2）その他のツール方法：
$ .Each（）：暗黙の反復
$ .Trim（）：両端のスペースを削除
$ .ParseJSON（）
···
< スクリプトSRC = "JS / jQueryの-1.10.1.js" タイプ=の"テキスト/ JavaScriptを" > </ スクリプト >
< スクリプトタイプ=の"テキスト/ JavaScriptを" >
/ *
ボタンをクリックしてください。1.要件：テキストボタン、新しい入力ボックスの
配列の出力値にすべての要素をトラバース要件2.
「マイatguigu」スペース3.削除全体需要
* /
/ *クリック必要があります：新しいフレームの入力を表示するには、テキストボタンを* /
。機能として//1.1）パラメータ：DOMがロードされると、このコールバックを実行
$（関数（）{ // ドキュメントがロードリスナー完了したバインド
すべての一致を検索：// 1.2）パラメータセレクタ文字列をjQueryオブジェクトの中にそれらをラベルやパッケージ
$（「#btn」）。クリックして（ 関数（）{ // クリックイベントリスナーをバインド
？この// DOM要素（<ボタン>）のイベントは何である
//警告（this.innerHTML）
はjQueryオブジェクトに包装DOMオブジェクト：DOMオブジェクトの// 1.3）パラメータ
アラート（$（この（）の.html ））
// 1.4）以下でパラメータのhtmlタグの文字列（）：ラベルオブジェクトを作成し、jQueryオブジェクトの中に包装
$（'の<input type = "text" NAME = "メッセージ3" /> A' ）。appendTo（'DIV' ）
}）
}）
/ * 出力配列トラバーサルの要件のすべての要素の値2. * /
VARのARR = 2 ,. 4 ,. 7]
// 1）.each $（）:. 暗黙反復
$の .each（ARR、関数（インデックス、項目）{
コンソールの.log（インデックス、項目）
}） 需求3. 去掉" my atguigu "两端的空格
// 2). $.trim() : 去除两端的空格
var str = ' my atguigu '
// console.log('---'+str.trim()+'---')
console.log('---'+$.trim(str)+'---')
</script> |
2jQuery核心对象
* 简称: jQuery对象
* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
* 使用jQuery对象: $obj.xxx()
2.1理解
即执行jQuery核心函数返回的对象，jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法, 让程序员能方便的操作dom
2.2.属性/方法
1）基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标
2）属性：操作内部标签的属性或值
3）CSS：操作标签的样式
4）文档：对标签进行增删改操作
5）筛选：根据指定的规则过滤内部的标签
6）事件：处理事件监听相关
7）效果：实现一些动画效果
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
需求1. 统计一共有多少个按钮
需求2. 取出第2个button的文本
需求3. 输出所有button标签的文本
需求4. 输出'测试三'按钮是所有按钮中的第几个
*/
//需求1. 统计一共有多少个按钮
var $buttons = $('button')
/*size()/length: 包含的DOM元素个数*/
console.log($buttons.size(), $buttons.length)
//需求2. 取出第2个button的文本
/*[index]/get(index): 得到对应位置的DOM元素*/
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)
//需求3. 输出所有button标签的文本
/*each(): 遍历包含的所有DOM元素*/
/*$buttons.each(function (index, domEle) {
console.log(index, domEle.innerHTML, this)
})*/
$buttons.each(function () {
console.log(this.innerHTML)
})
//需求4. 输出'测试三'按钮是所有按钮中的第几个
/*index(): 得到在所在兄弟元素中的下标*/
console.log($('#btn3').index()) //2
/*
1. 伪数组
* 伪数组的类型： Object对象
* 两个特别的属性：length属性
数值下标属性
* 没有数组特别的方法: forEach(), push(), pop(), splice()
*/
console.log($buttons instanceof Array) // false
// 自定义一个伪数组
var weiArr = {}
weiArr.length = 0
weiArr[0] = 'atguigu'
weiArr.length = 1
weiArr[1] = 123
weiArr.length = 2
for (var i = 0; i < weiArr.length; i++) {
var obj = weiArr[i]
console.log(i, obj)
}
console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined
</script> |