博学谷it学习技术支持

jQuery中的函数

jQuery中的函数包括val.text以及attract 1.val：操作数组中 DOM 对象的 value 属性 $(选择器).val() ：无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值

$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

2.text：操作数组中所有 DOM 对象的【文字显示内容属性】 $(选择器).text()：无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回

$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

3.attr：对 val, text 之外的其他属性操作 $(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值

$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

注意点：

val和text都是调用值，但是一个是调用第一个值，一个是调用全部值

代码示例：

` $(function(){$ ("#btn1").click(function(){ var text = $(":text").val();alert(text)})

			$("#btn2").click(function(){
                            $(":text").val("三国演义");
			})
			
			$("#btn3").click(function(){
				alert($("div").text());
			})
			
			$("#btn4").click(function(){
			})
			
			$("#btn5").click(function(){
			})
			
			$("#btn6").click(function(){$("img").attr("src","img/ex2.jpg");
				})
		})

remove，empty，append，HTML，each

remove（）就是将数组中的所有DOM对象及其子元素一并删除 empty（）将数组中的所有DOM子对象删除

一个是删除所有对象和子对象，一个是只删除子对象，这个是区别点,比如下拉候选框中框与选项都删除，如果使用empty，则删除子的dom对象，删除的是选项option对象

append()为数组中所有 DOM 对象添加子对象

html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容

html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容

each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数

语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )

语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )

on()绑定事件

之前我们都是一个事件写一个函数，这样太麻烦了，要是一个元素有好几个事件我们还要写好几个事件吗？

所以直接用on绑定事件，在这个元素上绑定一个或者多个事件处理函数就比较方便了

	$("div").on({
        mouseover:function(){
            $(this).css("background","red");
        },
        click:function(){
            $(this).css("background","blue");
        },
        mouseout:function(){
            $(this).css("background","green");
        }
    })
//发生事件发生同样的操作的话：
	$("div").on("mouseover mouseout",function(){
        $(this).toggleClass("current");
    })

也可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

事件委派的好处是：（1）减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。

（2）使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。

同时，也可以动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。

$("ul").on("click","li",function(){
        alert(11);
    })
    var li = $("<li>我是后来创建的li</li>");
    $("ul").append(li);

写在最后：

jQuery虽然已经过时了，但是并没有被淘汰，而且近几年也不会。

现在市面上的大部分网站和应用还是基于jQuery，在此后的几年，他们仍然需要用jQuery维护。
很多公司没有专职的前端开发，他们的前端工作由后台负责，这些人更喜欢用jQuery加后台模板的工作模式。
部分两三年以上工作经验的前端开发，他们安于现状，排斥css3新特性，也没耐心学习mvvm框架，jQuery仍是他们的主要工具。
IE678并没有消失，所以jQuery仍有用武之地。
jQuery易于上手，仍然很适合做一些简单的网站。

综上所述，jQuery并没有被淘汰，仍然是新人必须技能之一。

前端学习

博学谷it学习技术支持

jQuery中的函数

remove，empty，append，HTML，each

on()绑定事件