jquery方法传值 jquery 方法

一、jQuery的相关概念

1、jQuery: 包括了很多好用的方法的js文件，对原生js的操作进行包装

    使用webAPI中的原生js实现的  都可以使用jQuery实现

2、jQuery的基本使用流程：
    1 引入jQuery的js文件：jQuery官网  github
    2 写入口函数：页面加载事件，为了能在页面标签加载完成之后再执行代码  $(function(){ .... })
    3 在入口函数中书写正式代码

3、jQuery对象和DOM对象

    jQuery对象：使用jQuery的方法获取的元素   
        实质：jQuery对象是一个包含了DOM对象伪数组
        注意：只能调用jQuery对象的属性和方法  不能使用DOM对象的属性和方法
        jQuery对象转化为DOM对象：jQuery对象[索引值]   jQuery对象.get(索引值)  

    DOM对象：使用原生js的方法获取的元素  
        实质：一个标签对应的对象
        注意：只能调用DOM对象的属性和方法  不能使用jQuery对象的属性和方法
        转化为jQuery对象：$(DOM对象)

二、选择器

基本选择器

• id选择器：$(’#id’);
• 全选：$(’*’);
• 类选择器：$（’.class’);
• 标签选择器：$（‘div’);
• 并集选择器：$(‘div,p’);
• 交集选择器：$(‘li .current’);
• 子代选择器：$（‘ul>li’);
• 后代选择器:$(‘ul li’)

筛选选择器

• 选择第一个：$(‘li:first’);
• 选择最后一个：$(‘li:last’);
• 选择索引：$(‘li:eq()’);
• 奇数：$(‘li：odd’);
• 偶数：$(‘li:even’);
  父级和子代选择器
• parents() 祖父
• parent()：父亲
• jQuery对象.parent(): 选择jQuery对象的父元素
• hildren(): 子代
• jQuery对象.children(): 选择jQuery对象的子元素
• 注意：如果不传入参数则选择出所有子元素

$("div").children()  选择div的所有子元素
  $("div").children("p")  选择div的所有子元素中p标签

• find(): 后代
  jQuery对象.find(): 选择jQuery对象的后代元素
  注意：必须要有参数，如果没有参数 选择不到元素
• siblings()：获取所有兄弟元素（不包括自己哦）
  jQuery对象.siblings(): 选择jQuery对象的兄弟元素
  注意：没有选择到当前元素
• nextAll():获取后面的兄弟元素 jQuery对象.nextAll(): 选择jQuery对象的后面的兄弟元素
• prevAll(): 获取前面的兄弟元素
  jQuery对象.prevAll(): 选择jQuery对象的前面的兄弟元素
• eq():
  jQuery对象.eq(索引值): 选择jQuery对象中索引值为指定值的元素在这里插入

三、jQuery操作元素的方法

show()  显示

        hide()  隐藏

        hasClass():
            jQuery对象.hasClass(类名字符串): 判断jQuery对象是否具有某个类
                返回true：具有指定类
                返回false：不具有指定类

        css()
            设置样式
                jQuery对象.css(样式名，样式值)
                jQuery对象.css({
                    样式名1:样式值1,
                    样式名2:样式值2,
                    样式名3:样式值3
                })
            获取样式
                jQuery对象.css(样式名)
                ##### toggleClass()

切换类名,如果有就删除，如果没有就添加

css()样式

设置样式
                    jQuery对象.css(样式名，样式值)
                    注意：这里需要给样式名和样式值加引号
                    
                    jQuery对象.css({
                        样式名1:样式值1,
                        样式名2:样式值2,
                        样式名3:样式值3
                    })
                    注意：这里不需要给样式名加引号。但是如果样式值不是一个数					字，则样式值需要加引号。
                    
                    
                获取样式
                    jQuery对象.css(样式名)，这里需要加引号

show/hide/toggle拓展

对角线动画     show(1000,fn)
 			第一个参数     动画时间
 			第二个参数     动画完成后的回调函数
 			注意：如果不指定动画时长，则无动画效果

slideDown/slideUp/slideToggle

滑入滑出动画     slideDown(1000,fn)
 			第一个参数       动画时间
 			第二个参数       动画完成后的回调函数
 			注意：即使不传入动画时间参数，也有动画效果

fadeIn/fadeOut/fadeToggle

淡入淡出动画      fadeIn(1000,fn)
			第一个参数        动画时间
			第二个参数        动画完成后的回调函数
			注意：即使不传入动画时间参数，也有动画效果

fadeTo

fadeTo(1000,value,fn)
		动画时长/透明度/回调函数

stop( )

动画排队解决方法：
			某个元素上如果同时设置了多个动画，则这些动画会按照添加的顺序依次执行
			可以简单理解为把所有动画都清除了
			添加新的动画之前，可以用stop清除原来的动画

animate({})

自定义动画
			jQuery对象.animate( 样式属性的键值对，动画时间，回调函数 )
			以动画的形式来设置元素的样式

val()

操作表单元素的值
			对应表单元素的value属性
			设置值       $(selector).val(“具体值”);
			获取值       $(selector).val();

html()

对应innerHTML
			设置       jQuery对象.html(要设置的HTML内容)
			获取       jQuery对象.html()

text()

对应innerText
			设置       jQuery对象.text(要设置的文本内容)
			获取       jQuery对象.text()

attr()操作自定义属性

操作标签自定义属性
			获取       $(selector).attr(“title”);
			设置       $(selector).attr(“title”, “传智播客”);

prop()操作固有属性

操作元素固有属性

data()

在元素上存储、取数据
			可以理解为把数据存储到元素上，将来可以通过这个元素来获取之前存储的数据
			存储        jQuery对象.data( 数据名, 数据 )
			取          jQuery对象.data( 数据名 )

each()遍历

each(function(index,element){})

    jQuery对象.each(function(遍历的索引值,遍历到的元素){
        遍历到的索引值是一个从0开始的数字
        遍历到的元素是一个DOM对象
    })

    $.each(要遍历的对象,function(遍历的索引值,遍历到的数据){
        
    })

focus()获取焦点

ele.focus()
使前面的元素获取焦点

创建、插入、删除元素

创建

        $(具有标签格式的字符串)
        注意：以上方式创建的返回值是 jQuery对象

    插入

        父元素.append(目标元素)  把目标元素插入到父元素的最后一个子节点的位置上
        父元素.prepend(目标元素)  把目标元素插入到父元素的第一个子节点的位置上
        兄弟元素.after(目标元素)  把目标元素插入到后面兄弟元素的位置上
        兄弟元素.before(目标元素)  把目标元素插入到前面兄弟元素的位置上

    删除

        jQuery对象.remove()

    清空

        jQuery对象.empty()  清空当前标签中的所有内容
        jQuery对象.html("") 清空当前标签中的所有内容

JSON方法

JSON.stringify(data)将括号中的对象转换为字符串
JSON.parse(data)将括号中的字符串转换为对象

关于JQ自动索引

JQ只能给相同的并且是亲兄弟的标签默认添加伪索引，
如果这些标签不是亲兄弟，那么只能通过自定义的方式来添加真索引

操作元素的尺寸、位置

尺寸

width()/height()

            jQuery对象.width()  获取到盒子的width属性值，获取到的是一个数值

innerWidth()/innerHeight()

            jQuery对象.innerWidth() 获取到的是盒子的width + padding ,获取到的是一个数值

outWidth()/outHeight()

            jQuery对象.outWidth() 获取到的是盒子的width + padding + border ,获取到的是一个数值

            jQuery对象.outWidth(true) 获取到的是盒子的width + padding + border + margin ,获取到的是一个数值

位置

offset()
			操作元素在文档中的位置
            参考位置：整个文档
            使用方式：
            	获取:jQuery对象.offset()
            	设置:jQuery对象.offset({left:目标值,top:目标值 })
            	

        position()
       		 操作元素在上层标签中的位置
            参考位置：距离当前盒子最近的有定位的上层标签，如果没有就是文档
            使用方式：
            	获取:jQuery对象.position()
            	设置:jQuery对象.position({left:目标值,top:目标值 })

内容超出元素的距离(页面滚动)

内容超出元素的距离：scrollTop、scrollLeft

        jQuery对象.scrollTop()、jQuery对象.scrollLeft()
            获取元素的内容超出元素上方、左侧的距离

        jQuery对象.scrollTop(位置)、jQuery对象.scrollLeft(位置)
            设置元素的内容超出元素上方、左侧的距离
            
    特殊：
    	获取页面滚动出去上方的高度    $(document).scrollTop()
    	设置页面滚动出去上方的高度    $('body,html').scrollTop(目标值)

四、jQuery方法的特性

隐式迭代：在jQuery中，可以同时操作多个标签，方法内部会隐式循环迭代
    如：$("li").css("color","red")

链式编程：在jQuery中，"设置方法"会返回调用该方法的对象

1、使用jQuery遍历对象

jQuery对象.each(function(遍历的索引值,遍历到的元素){
    遍历到的索引值是一个从0开始的数字
    遍历到的元素是一个DOM对象
})

$.each(要遍历的对象,function(遍历的索引值,遍历到的数据){
    
})

2、使用jQuery创建、插入、删除元素

创建

    $(具有标签格式的字符串)

插入

    父元素.append(目标元素)  把目标元素插入到父元素的最后一个子节点的位置上
    父元素.prepend(目标元素)  把目标元素插入到父元素的第一个子节点的位置上
    兄弟元素.after(目标元素)
    兄弟元素.before(目标元素)

删除

    jQuery对象.remove()

清空

    jQuery对象.empty()  清空当前标签中的所有内容
    jQuery对象.html("") 清空当前标签中的所有内容

3、jQuery操作元素的尺寸、位置

尺寸

    width()/height()

        jQuery对象.width()  获取到盒子的width属性值，获取到的是一个数值

    innerWidth()/innerHeight()

        jQuery对象.innerWidth() 获取到的是盒子的width + padding ,获取到的是一个数值

    outWidth()/outHeight()

        jQuery对象.outWidth() 获取到的是盒子的width + padding + border ,获取到的是一个数值

        jQuery对象.outWidth(true) 获取到的是盒子的width + padding + border + margin ,获取到的是一个数值

位置

    offset()

        参考位置：整个文档

    position()
    
        参考位置：距离当前盒子最近的有定位的上层标签，如果没有就是文档

内容超出元素的距离：scrollTop、scrollLeft

    jQuery对象.scrollTop()、jQuery对象.scrollLeft()
        获取元素的内容超出元素上方、左侧的距离

    jQuery对象.scrollTop(位置)、jQuery对象.scrollLeft(位置)
        设置元素的内容超出元素上方、左侧的距离

4、jQuery事件

绑定事件：on

    1）同时绑定多个事件
        jQuery对象.on({
            事件名1:事件处理函数1,
            事件名2:事件处理函数2,
            事件名3:事件处理函数3
        })
        jQuery对象.on( 事件名字符串 , 事件处理程序 )

    2）事件委托-事件委派
        上层元素.on( 事件名 , 下层元素选择器 , 事件处理程序)
        注意：事件是绑定到了上层元素上，由下层元素触发
        优势：
            1、减少了绑定事件的次数
            2、可以为动态创建的元素（未来元素）预定事件
            3、在事件处理程序中，this指向下层元素

hover事件

鼠标经过离开都会触发
	1、jQuery对象.hover( 事件处理程序1,事件处理程序2 )
			鼠标经过触发处理程序1 
			鼠标离开触发处理程序2
	2、jQuery对象.hover( 事件处理程序 )
			鼠标经过、离开都会 触发处理程序

input事件

当表单中的数值改变时，会触发该事件：
	注意：不需要失去焦点，只需要改变值就会触发。

change() 事件

当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

绑定事件：on

1）同时绑定多个事件
        	设置不同的事件处理函数：
            jQuery对象.on({
                事件名1:事件处理函数1,
                事件名2:事件处理函数2,
                事件名3:事件处理函数3
            })
            
            设置相同的事件处理函数：
            jQuery对象.on( 事件名字符串 , 事件处理程序 )
            例：jQuery对象.on("click mouseleave",function(){alert(1)})


        2）事件委托-事件委派
            上层元素.on( 事件名 , 下层元素选择器 , 事件处理程序)
            注意：事件是绑定到了上层元素上，由下层元素触发
            优势：
                1、减少了绑定事件的次数
                2、可以为动态创建的元素（未来元素）预定事件
                3、在事件处理程序中，this指向下层元素

解绑事件off

jQuery对象.off()
            解绑所有事件

        jQuery对象.off(事件类型名)
            解绑指定类型事件

        jQuery对象.off(事件类型名,选择器)
            解绑委托事件（本身的事件还在）
            
            特殊：解绑所有委托事件
            $("ul").off("click", "**");解绑ul上面所有的点击委托事件

触发事件trigger

jQuery对象.事件名()

        jQuery对象.trigger(事件类型)

        （最常用，记住）jQuery对象.triggerHandler(事件类型)  不能触发浏览器的默认行为,只能让事件处理程序执行

jQuery方法的特性

隐式迭代：在jQuery中，可以同时操作多个标签，方法内部会隐式循环迭代
        如：$("li").css("color","red")  会将所有选中的的li都改变颜色为red

链式编程：在jQuery中，"设置方法"会返回调用该方法的对象，所以在"设置方法"的后面可以继续书写“设置方法”，或者书写“其他选择器”和对应的“设置方法”。

解决多库共存问题(命名冲突)

1、如果$被占用，可以使用jQuery
    2、如果$和jQuery都被占用，可以在引入冲突的库之前，用$.noConflict()转移控制权

对象的 拷贝

方法一：
$.extend([deep],target,object1,[objectN])
depp如果为true为深拷贝，默认为false浅拷贝
	深拷贝会直接拷贝数据，如果数据中的简单数据出现重名会覆盖。
	浅拷贝只能拷贝简单类型的数据，复杂数据只能拷贝一个地址过去。
target 要拷贝的目标对象
object1 待拷贝的第一个对象
objectN 待拷贝的第N个对象

方法二：
递归

方法三：
JSON对象的parse和stringify
例如:
function deepClone(obj){
//将待拷贝对象转为字符型存起来
    let _obj = JSON.stringify(obj),
//将字符型数据转换为对象型，传递给要拷贝的目标对象
        objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);