关于前端jQuery框架的一点理解,小的知识块

jQuery函数库

1 书写问题

• jQuery是一个类型非常丰富的函数库,他封装了以前我们所学到的大多数的属性及事件,此时一定要加以区分,正因为他是函数,所以在书写过程中我们一定要注意的是书写规则: 函数名(). 其中这个函数名可能是以前的相关属性名或事件名等熟悉关键字,此时一定要加上括号.

2关于控制css/html

• 与原生js不同的是,jQuery控制css/html用法是相似的,控制css用到的是css()函数,而控制html内容则用到的是html()函数,控制html属性用到的是prop()函数.即$("选择器等获取元素方法").css();/$(“选择器等获取元素方法”).html();/$("选择器等获取元素方法").prop();不同的是在css()中,要访问哪个value就写哪个css样式的key,在单属性控制中,css()中接key参数后,用逗号隔开写其newvalue即是修改其css属性样式,在多属性控制中,则是用的键值对进行修改,key之间用逗号隔开;在html()中,不写参数意味着访问这个html标签,写参数则意味着修改html内容(即js里的innerHTML);在prop()中,参数即是属性名,修改单属性和多属性方式与css()方法一样.其中,因为对HTML属性中的value属性用的较多,所以jQuery封装了一个专门修改value的方法:val(),用法与html()内容控制一样.当然,还有添加/删除类名也属于修改html属性,只不过这里要强调的是对类名的操作这就是addClass()/removeClass()/toggleClass().即添加类名$(“选择器等获取元素方法”).addClass(),参数即是要添加的类名;删除类名的操作$("选择器等获取元素方法").removeClass(),不写参数表示类名全部删除,写一个或多个参数表示删除一个或多个类名;而$(“选择器等获取元素方法”).toggle()则表示重复执行添加/删除类名的操作,通过事件的操作来到达重复执行的效果,参数即是操作的类名.

3关于jQuery的认知

• 在常规jQUery中,其最大的特点就是拥有丰富的函数,这些函数可以实现js的功能:实现对HTML内容的修改/对HTML属性的修改,对css样式的修改,绑定相应事件属性并完成相应功能.只不过jQuery把这些实现的功能都过程性的封装成了一个个的函数,但其终究是js的继承性函数库,也继承了js的基本语法,所以在用jQuery的时候,以js基本语法为前提,凡是遇到功能性需求时,要用函数来实现,这囊括了获取元素等方法.

4 关于变量定义

• 首先要说的是,定义的变量是关于控制html/css内容及属性问题时,其修改方式还是如前文"关于控制css/html"所说的进行修改,不能简单使用变量名进行修改.其次,在有多个重复变量需求时,就需要定义一个变量以提高代码的复用性,如进行多次value值操作的时候.还需要指出的是,在需要多次进行查找一个标签元素对其进行控制操作的时候,也需要定义一个变量,以减少每次的查找次数,提高代码执行效率.

5 关于this与$(this)

• 简单地说,this在jQury里指的是"这个"的意思,当我们定义了一个事件,准备在其中进行元素过滤的时候,就需要用到this.我们在描述一个标签的时候,如果要用到"这个"等词汇的时候,就需要我们使用"this"指定.概括一句话:this指代什么需要看前面指代的是什么,是标签就是指代一个特定html标签,这个标签的所有属性都可以用".“来指定,是自定义对象就是对象,其属性方法操作也可以通过点来表示;而$(this)是jQuery的js对象,他后面接”."表示紧跟的是它的方法,css()/html()/prop()/attr()等jQUery封装起来的方法.两者不能混淆,具体来看一个例子:

$("#list").delegate("a", "click", function(){
        if($(this).prop("class") == 'del'){
            $(this).parent().remove();
        }
        if($(this).prop("class") == 'up'){
            if($(this).parent().index()==0){
                alert("That is the first one!");
                return;}
        $(this).parent().insertBefore($(this).parent(.prev());
        }

6关于事件冒泡和事件委托

• 事件冒泡简单概括一下,指的是父级定义的事件响应在其相应子级也会有响应,而且,如果父级的父级定义了事件处理程序,那么会逐层向上传递,直至处理事件完成为止.这是一个简单定义,我们需要知道的是,在事件冒泡中,给我们提供了什么方便呢?允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上）它还可以让你在对象层的不同级别捕获事件.这是一个全部没有"过滤"的元素集,而阻止冒泡就可以对层级元素进行"过滤".在工作中我们常用"return false;"来阻止=事件冒泡.两者结合可以让jQuery更加人性化和智慧化,提高开发效率.事件委托就是利用事件冒泡原理特性来把事件加到父级上,通过判断子级的来源来执行相应的操作.自己来源可以是$(this)指定,也可以是其他方法.这样做的目的是减少事件的绑定次数,提高代码的执行效率,还可以通过这种方式对未来元素(以后增加的元素)绑定命令并加以操作.下面通过一段代码来加以区分:

• 一般绑定事件的写法:

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>

• 事件委托的写法

$(function(){
    $list = $('#list');
    //格式:$('选择器等获取元素的方法').delegate(发生真实事件的标签, 字符串形式的事件属性, 匿名函数)
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>

7 ajax

• ajax是一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息.ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信.jQuery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求.异步操作并且可以局部刷新(无刷新).但是为了数据安全性,ajax并不支持直接面对数据库和本地文件,需要通过第三方借口来实现实数据连接.需要注意的是,ajax是在服务器环境下运行的.

• ajax在实际操作中用到的参数:

• $.ajax({
  url:“请求地址”,
  type:“请求方式” GET(默认)/POST,
  dataTye:“预期服务器返回的数据格式” json/html/text,
  data:“发送给服务器的数据”,
  success:“请求成功的回调函数”, success:function(dat){}
  dat:接收dataType格式类型的数据返回值到这个地方来
  error:“请求失败后的回调函数”,
  async:“设置是否异步” 默认是True,代表异步 一般省略不写,都是默认值

• })