JavaWeb笔记--jQuery

偏执的太偏执、 2023-06-06 12:26 48阅读 0赞

# jquery： javascript库（jquery-3.3.1.js） #

(1) 引入js库:	<script type="text/javascript" src="...." ></script>
    
    	(2) jquery初始化函数：$(function(){...});

# 1.Dom对象与jQuery对象 #

##  1.1 Dom与jQuery的区别 ##

Dom节点有三种类型：
    		元素节点    <html>   <ul>... <p>
    		属性节点  ：title  src  alt ...
    		文本节点： 文本节点
    
    	Dom对象：
    		以上三种节点类型的具体对象 就是Dom对象。
    		使用：JavaSCript能够直接操作的对象，就是Dom对象。
    
    	jQuery对象：
    			jQuery能够直接操作的对象，就是jQuery对象。
    			例如：var $title = $("#myTitile") ; 通过jquery获取到的 $title 就是一个jquery对象。
    
    	同样一个元素，即可以成为一个dom对象（javascript对象），也可以成为一个jquery对象
    	
    	注：dom对象 只适用于js的各种语法（函数、属性），jquery对象只用于jquery的各种语法（函数、属性）。

##  1.2 dom对象和jquery对象的转换 ##

dom对象->jquery对象 : jquery工厂，$(dom对象)
    	
    	jquery对象 ->dom对象：
    		原理：jquery对象默认是一个数组 或集合   ；dom对象默认是一个单独的对象
    
    		数组：jquery对象[0]
    		集合：jquery对象.get(0)

# 2.Jquery选择器 #

##  2.1 基本选择器 ##

标签选择器：$("标签名")
    
    	类选择器：$(".class值")
    
    	id选择器：$("#id值")
    
    	并集(或)选择器（逗号,）：$(".class值,#id值")
    	
    	交集选择器（同时存在）直接写：$(".class值#id值")$("p.myStyle").html()（选中 即是p标签，并且class的值是myStyle）
    	
    	全局选择器：$("*")

##  2.2 层次选择器 ##

相邻选择器（+）：$("选择器1+选择器2")
    
    	同辈选择器（~）：$("选择器1~选择器2")
    
    	后代选择器（空格）：$("选择器1 选择器2")
    
    	子代选择器（>）：$("选择器>选择器2")

##  2.3 属性选择器 \[ … \] ##

$("[属性名]")
    	$("[属性名=属性值]")
    	$("[class!=a]")  不等于， 包含两种： 有class但值不是a,   没有class
    	$("[class^=a]")  class以a开头的元素
    	$("[class$=a]")  class以a结尾的元素
    	$("[class*=a]")  class有a的元素

##  2.4过滤选择器 ##

:first ：最开头那一个
    	:last  ：最后那一个
    	:even  ：偶数
    	:odd   :奇数
    	:eq(index)：第index个
    
    	:gt(index)   : >index的全部元素
    	:lt(index)   : <index的全部元素
    	:not(选择器) :除了...以外
    	:header      :选中所有的标题元素 h1 h2 <h1>
    	:focus       : 获取当前焦点的元素

##  2.5.可见性选择器 ##

:visible ：选中所有可见的元素
    	:hidden：选中所有隐藏的元素

# 3.事件、事件函数（事件方法） #

##  3.1原生JS与jQuery ##

js: onXxx
    	onclick();
    	写在<script>内，ready()外；
    
    jquery: Xxx
    	click(); 
    	ready(function(){
    
    		$(选择器).事件类型(function(){
    			...
    		});
    	});

##  3.2 鼠标事件 ##

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

##  3.3 键盘事件 ##

keydown():按键 从上往下的 过程
    	keypress() ： 按键被压到 最底部
    	keyup()：松开按键

##  3.4 表单事件 ##

focus()：获取焦点
    	blur()：失去焦点

##  3.5 绑定事件与移除事件 ##

绑定事件：$(...).bind("事件名",[数据],函数);
    
    	批量绑定：$(...).bind({ "事件名":函数   ,  "事件名":函数 ,...,"事件名":函数 }) ;
    
    	移除事件：$(...).unbind("事件名");

##  3.6 复合事件 ##

hover(f1,f2)：切换使用mouseover()和mouseout()

##  3.7 显示效果（隐藏与显示） ##

hide()：隐藏形式--> hide([速度],[回调函数]);
    	show()：显示
    	toggle()：切换隐藏与显示
    	fadeIn()：淡入  显示
    	fadeOut()：淡出 隐藏
    	slideDown()：下拉，显示
    	slideUp()：上拉  隐藏

# 4.操作DOM #

##   4.1 样式操作 ##

####    4.1.1 设置css() ####

jquery对象.css("属性名","属性值");
    		jquery对象.css({ "属性名":"属性值"      ,"属性名":"属性值" ,...,"属性名":"属性值"     });

####    4.1.2 追加或移除样式class ####

addClass("x");
    		addClass("x x x");
    		removeClass(x);
    		removeClass(x x );
    		removeClass()：移除全部样式
    		toggleClass("x x x")：切换追加与移除

##   4.2 内容操作 ##

html()：获取值 ，获取的是元素 的内容 ，包含了 元素内部的 各种标签
    	html(xxxx)：先渲染，后显示
    
    	text()：获取值 ，值获取文本值
    	text(xxxx)：將值原样显示，没有渲染
    
    	val()：获取value值
    	val(xxx)：设置value值

##   4.3 节点与属性操作 ##

####    4.3.1 节点操作 ####

①查询节点：（jquery选择器）
    		
    		②创建节点： $()
    			$(选择器):获取节点		
    			$(DOM对象)：转换
    			$(html字符串)
    			
    		③插入节点  文档
    		
    		④替换节点
    			$X.replaceWith($Y)	：用$Y替换$X	
    			replaceAll();
    			
    		⑤删除节点
    			remove()：彻底删除
    			detach()：将结点删除，但关联的事件、数据不会删除（不推荐使用）
    			empty()：只删除内容
    			
    		⑥克隆节点
    			clone(true|false)
    			$(document).ready(function(){     
    				$("li").click(function(){  ... });
    			});			
    			  <li>xxxx</li>

####    4.3.2 属性操作 ####

attr("属性名")：获取属性值
    		attr("属性名","属性值")：设置属性值
    		attr({ "属性名":"属性值", "属性名":"属性值" , "属性名":"属性值" } );
    		removeAttr("属性名")：删除属性值

##   4.4 获取集合与遍历集合 ##

子节点集合 
    		$(...).children( "li")
    
    	后代集合
    	 	$(...).find( "li")
    
    	同辈集合
    		next()：后一个  +
    		prev(): 前一个
    		siblings()：同辈，左、右
    
    	前辈
    		parent()：父代
    		parents("ul")：祖先
    
    	过滤集合：
    		(1)很多方法的()就是一个过滤选择器
    		(2)filter("选择器...");  
    
    	遍历集合：
    	$(...).each(function(index,element){...});

##   4.5 CSS-dom操作 ##

height(500) ;
    	width(500)
    
    	offset()：偏移量（左上角的点）,left top
    	offset(function(n,oldOffset){   ... })
    
    	offsetParent()：获取  （已定位）的最近的祖先元素
    	
    
    	scrollLet()
    	scrollTop()

##   4.6 表单校验 ##

(1) 获取要校验的元素值(选择器) 用户名、密码
      	(2) 通过字符串处理方法或者正则表达式等手段进行校验
    	(3) 触发校验的方法或事件（校验）
    		blur()：失去焦点时触发
    		submit()：当点击表单的 “提交submit”按钮时触发
    		onblur="xxx()"
    		onsubmit="xx()"