一.万能的$($===jQuery)
$是一个对象,也是一个方法
1.1 直接获取页面的元素
$("选择器") 例:$("#id值")
1.2 dom就绪后执行相应的代码
window.onload = function(){...} -> 页面加载完毕后执行(所有数据请取完毕)
$(function(){...}) -> dom加载就绪(只需要读取到标签与属性即可【速度更快,性能更好】)
1.3 把一个原生的dom对象转成jQuery对象
jQuery对象的功能更加强大 【object{...}】,是一个伪数组
原生 -> jQuery : $(原生对象)
jQuery -> 原生 : jQuery对象[0]/jQuery对象.get(0)
1.4 直接创建一个元素 $("<div>")
1.5 直接调用相应的方法 $.get(..)/$.parseJSON(..)
二.选择器
2.1 基本选择器(id,class,标签,多选择器)
2.2 层级选择器(父子,后代)
2.3 伪类选择器(:名称)
2.4 属性选择器 -> $(div[name])/$(div[name=xx])
三.事件注册
$(元素).click(function(){...})
$(元素).bind("click",function(){...}) / unbind
$(元素).on("click",function(){...}) / off
=============事件委派===========
$("tbody").on("click",".delBtn",function(){})
监听tbody的点击事件,当你点击的位置(元素)符合 .delBtn -> 就触发事件
四.学习的内容的列举
1.each() -> 遍历咱们的元素
jQuery对象.each(function(index,ele){
//index:遍历的下标
//ele:遍历的每一个元素
})
2.length -> 一个jQuery元素(伪数组)的长度
jQuery对象.length/jQuery.size()
3.attr/prop -> 获取与设置某个元素的属性
prop:支持多选与单选(attr支持有问题)
var 属性值 = jQuery元素.attr/prop("属性名");
jQuery元素.attr/prop("属性名","属性值");
4.HTML代码/文本/值
var html = jQuery对象.html() -> 获取一个对象中的所有html的内容
jQuery对象.html("<div>xxx</div>") -> 设置一个对象中的所有html的内容
//val只用于设置表单元素(input,textarea,select)的值
var html = jQuery对象.val()
jQuery对象.val("<div>xxx</div>")
5.css -> 获取与设置元素的某个样式
jQuery元素.css("样式名","样式值");
jQuery元素.css("background-color","red");
6.文本操作
jQuery元素.append("元素"); -> 把括号中的元素放到jQuery元素中
jQuery元素.appendTo("元素"); -> 把jQuery元素追加到元素中
jQuery元素.empty():清空所有子元素
jQuery元素.remove():删除自己
jQuery元素.clone([true/false]):当前元素复制一下 (加true可以连事件一起复制)
7.查询
jQuery元素.closest("条件") -> 从当前元素向上查询,找到第一个满足条件的元素为止
jQuery元素.parent() -> 找到当前元素的父元素
8.ready(fn) :页面载入 [dom就绪后执行相应的代码]
$(function(){...})