jq day-01
回顾js
1.创建正则方法:
1.1 var reg = /o+/g;
1.2 var reg = new RegExp(/o+/,"g")
2.元字符简写
.
\d
\w
\s
[\u4e00-\u9fff] 简体中文
3.量词简写
+
?
*
4.手机号正则
/^0?1{1}[3-9]{1}[0-9]{9}$/
/^0?1[3-9]\d{9}$/
jq引入
$:是函数名,等价于jQuery
$():函数调用,
函数参数:可以字符串类型,js对象,函数
作用:
1.获取元素
2.将js对象转化为jq对象
dom对象和jq对象相互转化
dom对象 转化 jQuery对象:
$(dom对象)
jQuery对象 转化为 dom对象:
1. $("div")[0]
2.$("div").get(0)
$(this) 与 this
$(this) 和 this 关键字 都是指向当前操作对象,
$(this)是jq对象,this是dom对象
window.onload 与 $(document).ready()区别
1.onload:页面加载完成 dom/css/js/图片/音频/视频等加载完成 只能执行一次
2..ready:dom加载完成之后,dom 多次执行,按照顺序加载
css()
作用:改变被选中元素的行内样式
参数:两个参数:一个属性名字符串,一个属性值字符串
或者一个参数:样式属性对象
返回值:添加样式之后的自身
$(".c1").css("color","red").css("fontSize","40px")
$(".c1").css({
"color":"red",
"fontSize":"40px",
"background":"green",
"border":"1px solid #ccc"
});
连缀
前提是:jq函数的返回值是处理之后的自身
$(".c1").css("color","red").css("fontSize","40px").css("background","green").css("border","1px solid #ccc");//连缀现象
基本选择器
标签选择器:$("div")
id选择器:$("#box")
类名选择器:$(".box")
全局选择器:$("*")
后代选择器:$("ul li")
子代选择器:$("ul>li")
交集选择器:$("li.c1") $("li#c1")
群组选择器:$("ul,ol,li")
兄弟选择器:
$("div+p") 相邻的下一个兄弟 等价于 $("div").next("p")
$("div~p") 下面所有的兄弟 等价于 $("div").nextAll("p")
prev()/prevAll()/next()/nextAll()
prev():相邻的上一个兄弟
prevAll():上面所有的兄弟元素
next():相邻的下一个兄弟
nextAll():下面所有的兄弟元素