jquery学习

jquery学习

1.jQuery基础
jquery：javascript类库。
jquery.3.3.1.min.js :压缩版，内容一样，但是压缩版内存占用更小。
jquery.3.3.1.js：开发版。
引用：
注：在html中出错，是不会提示的。如果调式工具（F12)没有错误提示，但显示效果不一致，考虑html错误。

//初始化函数，当页面加载完之后，自动执行。
$(document).ready(function(){});
<!--简化-->  $(function({}));

注：javascript语句不能写在ready方法里面
$等价于jQuery。

jQuery和javascript的语法（函数、属性）各自独立。
dom对象->jquery对象：jquery工厂 , $(dom对象)
jquery对象 ->dom对象：基础 ： jquery对象默认是一个数组或者集合；dom对象默认为一个对象。语法：数组：jquery[0] 集合 jquery.get(0)

2.jQuery选择器
①基础选择器

• 标签选择器 $(“标签名”)
• 类选择器 $(".class值")
• id选择器 $("#id值")
• 并集选择器 $(".class,#id")
• 交集选择器 $(“p.class”) 不能出现歧义
• 全局选择器 $("*")

②层次选择器

• 相邻选择器 $(“选择器1+选择器2”) 取后面的第一个选择器2的元素
• 同辈选择器 $(“选择器 ~选择器2”) 取所有同层次后面的元素
• 后代选择器 $(“选择器 选择器2”) 去所有的后代元素

③属性选择器 […] $("[....]")
$("[name]") 选中所有有name属性的元素
$("{[name=xxx]") 选中name=xxx的元素。
$("{[name!=xxx]") name属性值不等于xxx的元素
$("{[name^=a]") name属性值以x开头的元素
$("{[name$=a]")name属性值以a结尾的元素
$("{[name*=a]")name属性值中有a的元素

④过滤选择器 :

• 基本过滤选择器 （从0开始)
  ：first:最开头哪一个
  ：last 最后一个
  ：even 偶数
  ：odd 奇数
  ：eq(index) 第index个数
  ：gt(index) >index的全部元素
  ：lt(index) <index的所有元素
  ：not（选择器）除 …之外
  ：header 所有的标题元素
  ：focus 获取当前焦点所在的元素

⑤可见性选择器
：visible :选中所有可见的元素
：hidden 选中所有不可见的元素

⑥表单选择器
$(":type值") 例如 $(":file") $(":text")

3.jQuery事件
js: onXxx onclick() jQuery (没有on): click()

ready(function(){
		$(”选择器").事件类型(function(){
	});
});

鼠标事件:

• click() 单击事件
• mouseover 鼠标悬浮
• mouseout 鼠标离开

键盘事件

• keydown 键盘从上往下的过程
• keypress 键盘被按压到底部
• keyup 键盘松开
  通过keyCode来指定具体的案件

$("body").keydown(function(event){
	if(event.keyCode===13){
		alert("按下回车键");
	}
});

前端的一些事件、方法，会在某些情况下失效。

表单事件

• focus 获取焦点
• blur 失去焦点

绑定事件
$("…").bind(事件名，[参数],函数）;
$("…").bind(“click”,function(){});
//批量绑定
$("…").bind({“事件1”:function(){},“事件2”:function(){}});

移除事件
$("").unbind(“事件名”);

复合事件
hover（f1,f2） ：切换使用mouseover() 和mouseout()；
toggle(f1,f2,f3,f4): 多次click()事件,第一次点击执行f1，第二点击执行f2。
这个自适应于jQuery1.9以前。

显示效果 （隐藏与显示）

• hide([速度],[回调函数]) 隐藏
• show() 显示
• fadeIn() 淡入
• fadeOut () 淡出
• slideDown() 下拉显示
• slideUp () 上拉隐藏

回调函数：应用于函数体内，作为函数的参数。主函数主体执行完了之后，就会调用回调函数。

4.操作DOM
a.样式操作
jquery对象.css(“属性名”,“属性值”);
jquery对象.css({“属性名1”:“属性值”,“属性名2”:“属性值”});
b.添加和移除样式
jquery对象.addClass(“class值”);
jquery对象.addClass(“class值1 class值2”);
jquery对象.removeClass(“class值”);
c.内容操作
html():获取值，获取的是元素的内容，包含了元素内部的全部内容。
html（xxxx):先渲染，后显示
text()：获取值，获取的是元素的文本值。
text(xxxxx),将值原样显示，没有渲染。
val():获取val值。
val(xxxx)：赋值。
d.节点与属性操作
①节点操作

• 查询节点 （jquery选择器）
• 创建节点 ：$()

		$(选择器) :获取节点
  		$(DOM对象):将dom对象转化为jquery对象
  		$(html字符串),   `$("<Li>xxxx</Li>")`

• 插入节点

	$(A).append$(B)  ,将B插入A内容的里面后面
	$(A).prepend$(B)  ,将B插入A内容的里面前面
	$(A).after$(B),将B插入A内容后面
	$(A).insertafter$(B),将B插入A内容后面
	$(A).before$(B),将B插入A内容前面
	$(A).insertbefore$(B),将B插入A内容前面

• 替换节点
  X.replaceWith(Y) 用Y替换X.
  replaceAll() "$(<li>vvvv</li>" ).replaceAll("ul>li:eq(0)")

• 删除节点
  remove()：彻底删除
  detach():将节点删除，但关联的事件、数据不会删除（不推荐使用)
  empty():只删除内容

• 克隆节点
  clone(true :克隆节点同时也克隆事件|false :只克隆节点)。

  ②属性操作

• attr(“属性名”):取属性值;

• attr(“属性名”,“属性值”)：设置属性值

• attr({“属性名”:“属性值”,“属性名”:“属性值”});

• removeAttr(“属性名”):删除属性值

e.获取集合与遍历集合
子节点集合

$(...).children("li")等价于$( "ul>li")

后代集合

 $(...).find("li")  不推荐使用

同辈集合
next():后一个
pref():前一个
siblings()：全部同辈

前辈集合
parent():父辈集合
parents():所有的前辈

过滤集合
filter("：选择器");

遍历集合：

$(...).each(function([index],[element]){
	$(this.html());
})

CSS-DOM操作
height()：高度
width()：宽度
offset()：偏移量（左上角的点)

	$(....).offset(function(index,oldoffset){
		var newOffset=new Object();
		newOffset.top=oldOffset.top+100;
		newOffset.left=oldOffset.left+100;
		return newOffset;
})

offsetParent(): 直接获取已经定位的父元素，已经定位：元素position(默认为static）已经被设置为relative,fixed,absolute。
scrollLet():设置滚动条定位
scrollTop():设置滚动条定位

5.表单校验
表单校验，可以减轻对服务器的访问次数
a.获取要校验的元素值（选择器） 用户名，密码
b.通过字符串处理方法、或者正则表达式等手段 进行校验。
c.触发校验的方法或者事件（校验时机）
blur（）：失去焦点时触发
submit():当点击表单的“提交"按钮时触发
正则表达式：用于定义规则
正则表达式.test(email) ->true|false 测试email是否符合规则;
/…/一个规则的开始和结束




正则表达式表示电话号码： /^1 [0-9]{10} &/
邮箱 ：/^/w+@[0-9a-zA-Z]{2,4}.[a-zA-Z]{2,3} (.[a-zA-Z]{2,3})$/