JQuery复习

在javaWeb中 什么是事件：
应用程序接收用户操作的响应

简单描述JavaScript与jQuery的关系
  
    JQuery是JavaScript的程序库之一，他是JavaScript对象的使用函数的封装
    (简述 Jquery是Js中的一种封装函数的工具)
    简写js代码
    
jQuery的语法结构包括哪几部分？    
    工厂函数 简化Js代码   工厂函数: 将DOM对象转换为Jquery对象
    选择器 获取元素
    方法事件 元素的事件
    
onload 和 ready 区别
onload 
    全部加载完 才能展示 
    包含(标签,视频,音乐,图片)
    只会执行{最后}(一个)加载事件
··

展示和消失的方法：
show(); 展示元素 display:block
hide(); 隐藏元素 display:none
slideDown(s[毫秒计位]) 上下显示元素
slideUp(s[毫秒计位]) 上下关闭元素
toggle(s[毫秒计位]) 上下左右 打开和关闭
fadeOut() 从透明显色
fadeIn() 变透明



获取标签内容
text()方法 获取元素中的文本内容
html()方法 获取元素中包含标签的的文本内容
val()方法 只获取input表单元素中的内容就是 value属性的值


click表示单机事件
.css() 渲染样式

为什么a标签中在使用的使用要在href上添加"javaScript:;":
    如果a标签其中的内容为空的话 他会一直跳转并刷新页面
    使用JavaScript:; 停止跳转他表示页面未完成 或者"#" 自身跳转






使用选择器的主要目的是：
    锁定并渲染
    
jQuery选择器包括哪几大类？
基本
层次
属性
基本过滤

基本选择器：
    id：#
        在工厂函数中使用id定位元素，返回的第一个符合条件的的元素
        $('#id')
    class: .
        在工厂函数中使用class定位元素，返回的所有符合条件的的元素
        $('.class')
   标签：
       在工厂函数中直接使用HTML标签定位元素，返回所有符合条件的元素
       $('div')
       
   并集：  #id,.class,div
       多个基本选择器组合使用，选择器之间使用,号隔开，返回所有符合的元素 
   全局：
       定位元素并返回DOM文档中所有的元素
       $('*')

后代选择器：('#menu li') 获取指定元素下的的标签元素 获取id为menu的标签下的li
如果外面包含的div 照样可以找到li

子选择器：('#menu>li') 获取指定元素下的的标签元素 获取id为menu的标签下的li
如果外面包含的div 找不到li

相邻元素选择器：('div+p') 获取div同辈中的下一个p
只能返回一个p标签

同辈元素选择器：('div~p') 获取div同辈中的所有p标签
获取div下的所有p标签

属性选择器的区别：
    加标签 是为了缩小查询范围
    $('[value]')  所有value属性
    $('[value = abc]') 所有value属性中有abc的
    $('[value != abc]') 所有value属性中没有abc的
    $('[value ^= abc]') 所有value属性中开头是abc的
    $('[value $= abc]') 所有value属性中结尾是abc的
    $('[value *= abc]') 所有value属性中所有包含abc的
    通配符 *$^!=
    
    
	过滤选择器:
			:first			// 返回符合条件的第一个元素	
			:last			// 返回符合条件的最后第一个元素	
			:even		// 返回索引值(从0开始)为偶数的元素
			:odd			// 返回索引值(从0开始)为奇数的元素
			:eq(index)	// 返回索引值(从0开始)为index数的元素
			:gt(index)	// 返回索引值(从0开始)大于index的元素
			:lt(index)		// 返回索引值(从0开始)小于index的元素
			:focus		// 聚焦
			:animated	// 选取当前所有动画元素
			:header		// 返回H1-H6的标题元素
			:not(selector)	// 去除符合条件的元素




后代选择器和子选择器有什么区别？
后代 选择器在选择的时候可避免中间不是指定元素 并且 后代选择器他能找到 中间有隔阂的子元素是否匹配
子选择器 在选择的时候不可以避免中间不是指定元素 一旦不是 就不会进行渲染




在Jquery中使用this关键字可使用 在时间上获取当前选中的其中一个值
this 表示这个的意思 其中"个"很重要 获取其中的这个

事件的操作
应用程序接收用户操作的响应

鼠标事件
    mouseover 进入
    mouseout 离开
    
键盘事件
    keydown()  键盘按下触发的事件
    keyUp() 键盘按下并释放的时候触发的事件
    
浏览器事件：
    在流量被 缩小放大 调整尺寸的时候 触发的事件
    
表单事件
    blur()  失去焦点(光标)
    fours() 获取焦点(光标) 

组合事件
绑定事件 : 可以放置各种个样的事件 但是依照属性执行
    $(selector).bind({"事件名":function(){ },"事件名":function(){ });

解除绑定事件：
    $(selector).unbind() // 解除所有绑定的事件
    $(selector).unbind('事件名称')
    
复合事件：
toggle() 方法在 jQuery 版本 1.8 中被废弃，在版本 1.9 中被移除。

动画事件
	展示和隐藏元素		speed内更改元素的宽高
    show(ms) 通过(按照比例) 不断改变元素的宽高，最终实现元素的显示
	$('div').show([speed][,callback]);
    hide(ms) 通过(按照比例) 不断改变元素的宽高，最终实现元素的隐藏
	$('div').hide([speed][,callback]);
     *	$('div').toggle([speed][,callback]);	// 在显示和隐藏之间切换
	speed：单位毫秒，默认0
	callback：回调函数

	展示和隐藏元素		speed内更改元素的高度 
     *	$('div').slideDown([speed][,callback])	// 铺开元素
     *	$('div').slideUp([speed][,callback])	// 收起元素
     *	$('div').slideToggle([speed][,callback])	// 在铺开和收起之间切换

	渐隐渐显		speed内更改元素的透明度,当透明度为0时，直接隐藏元素
    改变元素透明度 opacity透明度属性 实现元素的隐藏和展示
	$('div').fadeIn([speed][,callback]);
	$('div').fadeOut([speed][,callback]);
 
    定义动画
	style需要修改的样式
	speed完成的时间
	easing完成的方式(匀速还是变速)
	callback回调函数

 	$('selector').animate({style},speed,easing,callback);
  
hover事件 按照顺序执行 两个函数 按照顺序执行 移进 移出
    $.hover(   
        function(){ //移进
            事件内容
        },function(){// 移出
            事件内容 
        }
    )





DOM操作分为哪些类型？
DOMCore  获取页面中的元素 通过基本选择器样式
HTML-DOM 获取元素的文档 内容 
CSS-DOM 给元素渲染样式

jQuery中如何添加和移除类样式？
通过选择器.css样式获取 获取 addClass('title') 添加一个类样式
使用.removeClass('title') 移除添加的类样式

如何获取元素的所有同辈节点？
四不林四
siblings() 获取位于匹配元素前和后的所有同辈元素

// 添加css样式
css(name,value)
css({name:value,name:value})
// css(name) 获取样式属性的值

// 为当前元素追加类样式  同时可以追加个类样式
addClass("类1 类2 类3") 方法的作用

// 删除指定的类样式
removeClass("类1 , 类2 , 类3")

// (切换) 当绑定click事件的时候  和hover一样 (奇数次添加 偶数次删除)
// 拥有了add 和 remove 的特性 实现切换
toggleClass("类1 , 类2 , 类3") 第一次点击|是追加样式 第二次点击|是删除所有样式

// 返回元素中是否包含类样式 (多个样式以&&的关系);  以并且的关系存在 如果说有一个为假 则执行false条件
hasClass("类1  类2  类3")


只要在小括号中填写内容 就会编程覆盖
// 获取当下所有子元素的和文本内容
html()
//  覆其当下所有子元素的文本内容
html(content)

// 获取当下的文本内容
test()
// 覆其中的文本内容
test(content)

只能获取表单元素
// 获取表单元素中value属性的值
val()
// 覆盖表单元素中value属性的值
val(content)

// 向节点末尾追加子节点
parentNode.append(node);
// 将子节点追加到付节点中
childNode.appenddTo(parentNode)

// 向节点中第一个位置添加子节点
parentNode.prepend(node)
// 将子节点添加到父节点中的第一个位置
childNode.prependTo(parentNode)

// 在节点后添加一个同辈节点
node.after(nodeT);
// 将节点同辈节点追加到后(同辈元素)
Tnode.insertAfter(node);

// 在同辈接节点前 添加一个同辈节点
node.before(Tnode)
// 将元素添加到节点前(同辈元素)
Tnode.insertBefore(node);

// 清除当前节点
node.remove()
// 置空当前节点内容包括标签
node.empty()

声明元素的位置决定：效果会不同

// 替换当前节点
oldNode.replaceWith(newNode);
// 替换当前节点
newNode.replaceAll(oldNode);


prop 和 attr有什么区别

发现attr的返回值要么是checked要么是undefined，prop的返回值只有true和false。
prop当使用checkbox 和 select 时候 返回true和false
prop()函数的结果:
      1.如果有相应的属性，返回指定属性值。
      2.如果没有相应的属性，返回值是undefined
attr()函数的结果:
      1.如果有相应的属性，返回指定属性值。
      2.如果没有相应的属性，返回值是undefined
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()


// 获取节点属性
node.attr(name)
node.prop(name)
// 设置节点的属性和属性值
node.attr(name:value);
node.attr(name:value);

// 移除元素的属性
node.removeAttr(name)


node.children([expr]) 方法
获取当前节点下所有的子节点

获取下一个同层节点
node.next()

获取上一个同层节点
node.prev()

获取前后的所有同层元素不包括本身
node.slibing()

获取当前节点中的父级元素
node.parent()

获取节点所有的父级元素
node.parents()

查find() 方法

查 eq()
查 first()
查 filter()
查 last()

遍历所有选中的元素
each(function(index,element){
    中ele是js对象 必须转换一下
    index为元素下标，从0开始
    element 当前遍历到的DOM元素
    使用工厂函数进行类型转换 $(ele). 属性 
    目的： 将js对象 转换为 jquery对象
}) 


$('#img img').eq(num).css('display', 'block').siblings().css('display',
		'none');
	$('#num li').eq(num).addClass('active').siblings()
		.removeClass('active');

截断 当前链条中最近的筛选操作
并将匹配元素集还原为之前的状态
end()
回退上一个节点
忽略其中的属性 设置过css后 使用end




val()方法和attr()方法分别有什么作用？
val() 用于 获取input表单元素的值
attr() 用于 或获取和设置 属性 和 属性值


html() 方法和text()方法有什么区别？
html() 方法获取整体内容 可能还包含 标签
text() 只获取标签内容文本 

获取子元素和获取父元素分别用什么方法？
children 子
next 同下
prev 同上
sibling 同上下 不包本
parent 父
parents 祖

为什么需要进行表单验证？.
在客户端或者本机上验证数据

$(":input")能匹配页面中的哪些元素？
所有的表单元素 如 textarea，button，select，

简写：var reg = /表达内容/;
翻译：var reg = new RegExp("表达式","附加参数")





第九章重点：
:input     获取所有的表单元素 包含select，textarea，button
:text      获取文本框的内容
:radio     获取所有的单选按钮
:password  获取所有的密码框
:checkbox  获取所有的多选框
:submit    获取所有的单选按钮
:image     获取所有的图片按钮
:file      获取所有的文件域
:hidden    获取所有的 隐藏域-
able       标签 选中将光标移到文本框中

属性：
:enabled   可用表单元素
:disabled  禁用表单元素
:checked   选中的单选和复选框
:selected  选中的组合框

字符串判断：
indexOf(str[,start])
返回[开始]字符出现的位置 有返回下标 没有返回-1

可有可无：
快捷生成option函数
select>option[value='$@1990']{@$1990}*20


js 中的焦点事件： 表单元素中触发
        onfocus   元素获得焦点时触发
        onblur    元素事情焦点是触发
Jquery 函数：
        blur()    元素失去焦点是触发
        focus()   元素获得焦点是触发
        select()  元素被选中时触发

匹配字符
    /^RegExp$/ 格式
    \s     空格
    \S     非空格
    \d     [0-9]
    \D     [^0-9] 不是数字
    \w     任意字符
    \W     非任意字符
    .      换行符号以外的任意字符
匹配数量
    {n}    n次
    {n,}   大于n次
    {n,m}  大于n次和小于m次
    *      任意次
    +      一次和任意次
    ?       0,1次
        
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
test() 检索字符串的值 并返回true 和 false