爱站程序员基地文章目录
- 核心函数
- 传递一个函数
- 接受一个字符串选择器
- 接收一个字符串代码片段
- 接收一个DOM元素
- 静态方法和实例方法
- each()
- 原生的forEach方法
- jQuery的each方法
- 原生的map方法
- jQuery的map方法
- jQuery中的each静态方法和map静态方法的区别
- 区别一:
- 区别二:
- 选择器
- 内容过滤选择器
- :empty
- :parent
- :contains(text)
- :has(selector)
- 属性和属性节点
- 1.什么是属性?
- 2.如何操作属性?
- 3.什么是属性节点?
- 4.如何操作属性节点?
- 5.属性和属性节点有什么区别?
- arrt方法
- prop方法
核心函数
调用jQuery的核心函数
- $()
- jQuery
传递一个函数
$(function () {alert(\"hello lnj\")}
接受一个字符串选择器
返回一个jQuery对象, 对象中保存了找到的DOM元素
$(function () {var $box1 = $(\".box1\")var $box2 = $(\"#box2\")console.log($box1)console.log($box2)}
接收一个字符串代码片段
返回一个jQuery对象, 对象中保存了创建的DOM元素
$(function () {var $box1 = $(\".box1\")var $p = $(\"<p>我是段落</p>\")console.log($p)$box1.append($p)}
接收一个DOM元素
会被包装成一个jQuery对象返回给我们
$(function () {var span = document.getElementsByTagName(\"span\")[0]console.log(span)var $span = $(span)console.log($span)}
jQuery 对象
jQuery对象是一个伪数组(有0到length-1的属性, 并且有length属性)
$(function () {var $div = $(\"div\")console.log($div)var arr = [1, 3, 5]console.log(arr)})
静态方法
静态方法和实例方法
- 静态方法通过类名调用
// 1.定义一个类function AClass() {}// 2.给这个类添加一个静态方法 - 直接添加给类的就是静态方法AClass.staticMethod = function () {alert(\"staticMethod\")}// 静态方法通过类名调用AClass.staticMethod()
- 实例方法通过类的实例调用(对象)
//3.给这个类添加一个实例方法AClass.prototype.instanceMethod = function () {alert(\"instanceMethod\")}// 实例方法通过类的实例调用// 创建一个实例(创建一个对象)var a = new AClass()// 通过实例调用实例方法a.instanceMethod()
each()
原生的forEach方法
只能遍历数组, 不能遍历伪数组
- 第一个参数: 遍历到的元素
- 第二个参数: 当前遍历到的索引
var arr = [1, 3, 5, 7, 9]//数组var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组arr.forEach(function (value, index) {console.log(index, value)})obj.forEach(function (value, index) {console.log(index, value)})
jQuery的each方法
可以遍历伪数组的
- 第一个参数: 当前遍历到的索引
- 第二个参数: 遍历到的元素
var arr = [1, 3, 5, 7, 9]//数组var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组$.each(arr, function (index, value) {console.log(index, value)});$.each(obj, function (index, value) {console.log(index, value)})
map()
原生的map方法
- 第一个参数: 当前遍历到的元素
- 第二个参数: 当前遍历到的索引
- 第三个参数: 当前被遍历的数组
var arr = [1, 3, 5, 7, 9]//数组var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组arr.map(function (value, index, array) {console.log(index, value, array)})obj.map(function (value, index, array) {console.log(index, value, array))
jQuery的map方法
- 第一个参数: 遍历到的元素
- 第二个参数: 遍历到的索引
var arr = [1, 3, 5, 7, 9]//数组var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组var res = $.map(obj, function (value, index) {console.log(index, value)return value + index})var res2 = $.each(obj, function (index, value) {console.log(index, value)return value + index})console.log(res)console.log(res2)
jQuery中的each静态方法和map静态方法的区别
区别一:
- each静态方法默认的返回值就是, 遍历谁就返回谁
- map静态方法默认的返回值是一个空数组
区别二:
- each静态方法不支持在回调函数中对遍历的数组进行处理
- map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
trim(str)
- 作用:去除字符串两端的空格
- 参数:需要去除空格的字符串
- 返回值:去除空格之后的字符串
// 真数组var arr = [1, 3, 5, 7, 9]// 伪数组var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}// 对象var obj = {\"name\":\"lnj\", age:\"33\"}// 函数var fn = function(){}// window对象var w = windowvar str = \" lnj \"var res = $.trim(str);console.log(\"---\"+str+\"---\")console.log(\"---\"+res+\"---\")
isArray(obj)
- 作用: 判断传入的对象是否是真数组
- 返回值: true/false
// 真数组var arr = [1, 3, 5, 7, 9]// 伪数组var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}// 对象var obj = {\"name\":\"lnj\", age:\"33\"}// 函数var fn = function(){}// window对象var w = windowvar res = $.isArray(arr)console.log(res)//true
isFunction(obj)
- 作用: 判断传入的对象是否是一个函数
- 返回值: true/false
// 真数组var arr = [1, 3, 5, 7, 9]// 伪数组var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}// 对象var obj = {\"name\":\"lnj\", age:\"33\"}// 函数var fn = function(){}// window对象var w = windowvar res = $.isFunction(jQuery)//(fn)console.log(res)//true
isWindow(obj)
- 作用: 判断传入的对象是否是window对象
- 返回值: true/false
// 真数组var arr = [1, 3, 5, 7, 9]// 伪数组var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}// 对象var obj = {\"name\":\"lnj\", age:\"33\"}// 函数var fn = function(){}// window对象var w = windowvar res = $.isWindow(w)console.log(res)//true
holdReady(thold)
- 作用: 暂停ready执行
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><script src=\"js/jquery-1.12.4.js\"></script><script>// $.holdReady(true) 作用: 暂停ready执行$.holdReady(true)$(document).ready(function () {alert(\"ready\")});</script></head><body><button>回复ready事件</button><script>var btn = document.getElementsByTagName(\"button\")[0]btn.onclick = function () {$.holdReady(false)}</script></body></html>
jQuery对象
选择器
内容过滤选择器
:empty
- 作用:找到既没有文本内容也没有子元素的指定元素
$(function () {var $div = $(\"div:empty\")console.log($div)}
:parent
- 作用: 找到有文本内容或有子元素的指定元素
$(function () {var $div = $(\"div:parent\")console.log($div)}
:contains(text)
- 作用: 找到包含指定文本内容的指定元素
$(function () {var $div = $(\"div:contains(\'我是div\')\")console.log($div)}
:has(selector)
- 作用: 找到包含指定子元素的指定元素
$(function () {var $div = $(\"div:has(\'span\')\")console.log($div)}
属性操作
属性和属性节点
1.什么是属性?
对象身上保存的变量就是属性
2.如何操作属性?
对象.属性名称 = 值
对象.属性名称
对象[“属性名称”] = 值
对象[“属性名称”]
$(function () {function Person() {}var p = new Person()// p.name = \"lnj\"p[\"name\"] = \"zs\"// console.log(p.name)console.log(p[\"name\"])})
3.什么是属性节点?
在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点
4.如何操作属性节点?
- DOM元素.setAttribute(“属性名称”, “值”)
- DOM元素.getAttribute(“属性名称”)
$(function () {var span = document.getElementsByTagName(\"span\")[0]span.setAttribute(\"name\", \"lnj\")console.log(span.getAttribute(\"name\"))})
5.属性和属性节点有什么区别?
任何对象都有属性, 但是只有DOM对象才有属性节点
attr方法和prop方法
arrt方法
attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
- 可以传递一个参数, 也可以传递两个参数
- 如果传递一个参数, 代表获取属性节点的值
- 如果传递两个参数, 代表设置属性节点的值
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
$(function () {$(\"span\").attr(\"class\", \"box\")})
removeAttr(name)
删除属性节点
会删除所有找到元素指定的属性节点
$(function () {$(\"span\").removeAttr(\"class name\")})
prop方法
prop方法
特点和attr方法一致
$(function () {$(\"span\").eq(0).prop(\"demo\", \"it666\")$(\"span\").eq(1).prop(\"demo\", \"lnj\")console.log($(\"span\").prop(\"demo\"))})
removeProp方法
特点和removeAttr方法一致
$(function () {$(\"span\").removeProp(\"demo\")})
prop方法不仅能够操作属性, 他还能操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
$(function () {// console.log($(\"span\").prop(\"class\"))// $(\"span\").prop(\"class\", \"box\")console.log($(\"input\").prop(\"checked\"))// true / falseconsole.log($(\"input\").attr(\"checked\"))// checked / undefined})
