jquery|b站视频-尚硅谷jQuery教程张晓飞老师-笔记前端|javascript

前言
一、了解jQuery
二、jQuery的基本使用
三、jQuery的两把利器
四、jQuery函数的使用
五、jQuery对象的使用

前言之前只是用过jQuery，但没有系统地学过。
jQuery官网
jQuery中文网
jQuery在线帮助文档
jQuery基本语法
一、了解jQuery Write Less,Do More!
链式调用，读写合一

文章图片

二、jQuery的基本使用

文章图片
测试时用未压缩的版本：xxx.js
上线后用压缩的版本：xxx.min.js

="text/javascript"> window.onload = function () { var btn = document.getElementById('btn1') btn.onclick = function () { alert(document.getElementById('username').value) } } ="text/javascript" src="https://www.it610.com/article/js/jquery-1.10.1.js"> ="text/javascript"> $(function () { $('#btn2').click(function() { alert($('#username').val()) }) }) 用户名:

jQuery核心函数：$ / jQuery
jQuery核心对象：执行$()返回的对象

文章图片

三、jQuery的两把利器

文章图片

="text/javascript" src="https://www.it610.com/article/js/jquery-1.10.1.js"> ="text/javascript"> // 1. jQuery函数：直接可用 console.log(typeof $)//$是一个function console.log($ === jQuery) //true$与jQuery等同 console.log($ === window.$) //true$是一个全局函数// 2. jQuery对象：执行jQuery函数得到它 console.log(typeof $()) //"object"这个对象就是jQuery对象 // console.log($() instanceof Object); // true$('button').click(function () { alert(this.innerHTML) })

四、jQuery函数的使用 【jquery|b站视频-尚硅谷jQuery教程张晓飞老师-笔记】作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象

/* 需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框需求2. 遍历输出数组中所有元素值需求3. 去掉"my atguigu"两端的空格 */ /*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/ //1). 参数为函数 : 当DOM加载完成后，执行其中的函数回调函数 $(function () { //2). 参数为选择器(selector)字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象 var $btn = $("#btn") $btn.click(function () { //显示按钮的文本 //this就是发生事件的dom元素对象(也就是button) // alert(this.innerHTML) //3). 参数为DOM对象: 将dom对象封装成jQuery对象 var text = $(this).html()// 读写合一：不传参就是读，传参就是写 alert(text) //显示一个新的输入框 //4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象 $(' ').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') console.log($.trim(str) === 'my atguigu') //true

五、jQuery对象的使用