阅读 1681

jQuery基础知识点

jquery的介绍

  • jQuery 是一个 JavaScript的类库,包含了大量的,有助于项目开发的属性和方法,jQuery 极大地简化了 JavaScript 编程。
  • jQuery的版本
    • 第一代版本1.xx.xx,例如1.11.3,特点兼容所有浏览器(包含IE6~IE8),没有vue/react/angular等框架之前(数据驱动),项目都是基于DOM操作完成的。基本上项目都是jQuery。
    • 第二代版本2.xx.xx,放弃了低版本浏览器的兼容处理,迎合了一些移动端的开发处理(同时诞生一个比JQ更懂移动端的类库Zepto,所以二代版本是个鸡肋)
    • 第三代版本3.xx.xx,没有处理低版本浏览器的兼容,但是此时项目进入到框架开发时代,传统操作DOM的思想逐步被摒弃,所以JQ已经没落下了。

jQuery 库包含以下特性:

  1. HTML 元素选取

  2. HTML 元素操作

  3. CSS 操作

  4. HTML 事件函数

  5. JavaScript 特效和动画

  6. HTML DOM 遍历和修改

  7. AJAX

  8. Utilities

常用的jQuery的选择器

  • 获取需要操作的DOM元素,得到的结果是(JQ对象=>类数组集合),只有JQ对象才可以调取JQ提供的一操作DOM的方法。

操作DOM的方法

筛选、遍历方法 children/find/filter/eq(get)/prevAll/next/nextAll/siblings/index...

获取DOM元素

  • eq(index)返回被选元素的指定索引的元素,返回值是一个JQ对象(init(1)),依然可以继续调用JQ方法

    let $div = $('div')
    $div.eq(0).css('color','red') //给第一个div设置字体颜色为红色
    复制代码
  • get(index)返回被选对象的指定索引的元素,返回值是一个原生的DOM对象,可以使用原生浏览器提供的属性和方法。

    $("div").click(function() {
       x = $("div").get(0);
       $("div").text(x.nodeName + ": " + x.innerHTML);
    });
    复制代码
  • children(select)方法返回返回被选元素的所有直接子元素,selcet一般是字符串值,包含匹配元素的选择器表达式。

    $("ul").children()//返回ul下所有的子元素,返回值是JQ对象
    复制代码
  • find(select) //返回所有被选中的select元素,返回值也是JQ对象

    $("p").find("span").css('color','red');//返回p标签中所有span标签,并将字体颜色设置成红色
    复制代码

遍历方法

  • prevAll('select'),返回select同级的所有元素,但是必须是同一个父级下的。
  • prev('select'),返沪select同级的上一个元素,必须是同一个父级下的。
    <ul class="level-1">
        <li class="item-i">I</li>
        <li class="item-ii">II
            <ul class="level-2">
                <li class="item-a">A</li>
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <li class="item-c">C</li>
            </ul>
        </li>
        <li class="item-iii">III</li>
        </ul>
    
        console.log($('.item-3').prevAll());// li.item-1 li.item-2
        console.log($('.item-3').prev());// li.item-2
    复制代码
  • next('select'),返回同级的下一个元素,必须是同一个父级元素下。
  • nextAll('select'),返回同级下的所有元素,必须是同一个父级元素下。
    console.log($('.item-1').next())//返回与类型为item-1同级元素的下一个元素,必须是同一个父级哦
    console.log($('.item-1').nextAll())// li.item-2 li.item-3
    复制代码
  • siblings('select')获取选中元素同一父级元素下的所有同级元素。
    console.log($('.item-2').siblings())// li.item-1 li.item-3
    复制代码
  • index('select')获取选中元素在同级元素的index索引位置,必须是同一个父级元素下
    console.log($('.item-3').index()) // 2
    复制代码

操作样式 css/addClass/removeClass/toggleClass/hasClass/innerWidth...

  • css()用于返回所选样式的值或者设置单个以及多个样式
    $('item-2').css('color') // 返回类名为item-2元素的color样式
    
    $('item-2').css(background: 'red')// 设置类名为item-2元素的background颜色为红色
    
    // 设置多个样式的语法
    $('item-2').css({color:'red',background:'black'})
    复制代码
  • addClass('select')给所选元素添加类名
  • removeClass('select')给所选元素移出类名
    $('item-2').addClass('lis')
    
    $('item-2').removeClass('lis')
    复制代码
  • toggleClass(class,switch),给所选元素添加类名或者删除类名,class必须,switch可选,switch可规定是添加或者删除值是true或者false,一般不用写,因为如果没有类型就会自动添加,如果类名存在就会进行删除操作。
    $('item-2').toggleClass('lis') //添加或者删除类名 看所选元素是否存在lis类名
    复制代码
  • hasClass('select'),返回所选元素是否存在这个select类名,返回true或者false
    console.log($('li').hasClass('lis')) // true
    复制代码
  • innerWidth()返回所选元素的内部宽度,包含padding,不包含border和margin。
  • outerWidth()返回所选元素的外部宽度,包含padding和border,如果需要margin则用outerWidth(true)

操作内容 html/text/val/append/appendTo/insertAfter/attr...

  • html()返回或者设置所选元素的内容。如果该方法未写任何参数就是返回内容,如果写了内容(html(content))就是设置参数。content包含html标签。
  • text()设置或返回被选元素的文本内容。
  • val()返回或者设置被选元素的值,一般用于input表单。
  • append(content)在所选元素的内部的最后面插入内容,可以是HTML标签。
  • appendTo(),在所选元素内部的最后面插入内容,作用和append一样,但是写法不同。
  • insertAfter(),在所选元素外部的后面插入内容。
    $('content').appendTo('selector')// content是要添加的内容,selector是所选的元素的选择器。
    $('content').insertAfter('selector') // 语法如上
    复制代码
  • attr()设置或返回被选元素的属性值。

控制动画 animate/finish/fadeIn/fadeOut/hidde/show/slideDown/slideUp...

  • animate()用于创建动画,只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
    $(selector).animate({params},speed,callback)
    // params必需,参数是形成动画的css属性,speed可选,参数规定动画时长,可以取slow、fast或者毫秒,callback可选,是动画执行后所执行的函数。
    $('div').animate({
        width:'100px',
        height:'+=120px'
    })
    复制代码
  • finish()方法停止当前运行的动画,移除所有排队的动画,并为被选元素完成所有动画。
  • fadeIn()使用淡入效果来显示被选元素,假如该元素是隐藏的。
  • fadeOut()使用淡出效果来隐藏被选元素。
  • $(selector).hide(speed,callback),隐藏所选元素,speed和callback都是可选。
  • slideDown()被选元素被隐藏的前提下,则以下拉的动画显示被选元素。
  • slideUp()以上拉的形式隐藏被选元素

操作事件绑定 on/off/bind/unbind/delgate/one

  • off()通常用于移除通过 on() 方法添加的事件处理程序。
  • one()事件触发一次后就移除。
  • bind()被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
  • unbind()移除被选元素的事件处理程序。
  • delegate()方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

工具类方法 each/ajax...

  • $(selector).each(function(index,element)),循环每个li并执行函数

ajax

  • Ajax用于浏览器与服务器通信而无需刷新整个页面,服务器将不再返回整个页面,而是返回少量数据,通过JavaScript DOM更新一部分节点。期间数据传输可采用xml,json等格式,Ajax最早用于谷歌的搜索提示。其实不刷新整个页面便可与服务器通信的方法有很多,比如Flash,Java applet,iframe等,但Ajax是目前最为常见的一种。

  • 浏览器与服务器之间传输数据所采用的格式,比较常见的有xml,html,text,json,jsonp等,目前json由于占用更小存储,且是JavaScript原生格式,因此很受欢迎。

  • 常见的语法$.ajax({name: val, name: val...}),其中name的可选字段如下

    • url:链接地址字符串形式
    • data:需要发送到服务器的参数格式为键值对形式
    • type:请求数据的形式,有getpost
    • timeout:请求超时时间,时间单位为毫秒
    • cache:是否缓存请求结果,val用boolean表示
    • contentType:内容格式,默认为"application/x-www/form-urlencoded"
    • dataType:服务器响应的数据类型,val是字符串格式,有jsonjsonp等等
    • success:请求成功后服务器回调的函数。
    • error:请求失败后,服务器的回调函数
    • complete:请求完成后调用的函数,无论请求成功或者失败都会执行,该函数在sucess和error之后执行
    • async:是否异步处理,val是boolean类型,默认为true,如果是false,js会等待请求函数执行完毕后才会执行后面的代码。
    • username:访问认证请求中携带的用户名,val字符串格式
    • password:返回认证请求中携带的密码,val字符串格式
    //最原始的调用方法
    $.ajax({
        url: '/greet',
        data: {name: 'hello'},
        type: 'POST',
        dataType: 'json',
        success: function(data){
            data: jQuery.parseJSON(data) //dataType指明了返回数据为json类型,故不需要再反序列化
        }
    })
    
    // 简化写法
    $.post(
        '/greet',
        {naeme: 'hello'},
        function(data){
            ....
        },
        'json'
    )
    
    $.get(
          '/greet',
        {naeme: 'hello'},
        function(data){
            ....
        },
        'json'
    )
    
    /** 
    $getJSON,该方法使用get执行ajax请求,从服务器加载json数据,形式:$.getJSON(url, data, func)。
    $.load(),该方法将服务器加载的数据直接插入到指定DOM中,其中data如果存在则使用POST方式发送请求,不存在则使用GET方式发送请求。
    **/
    <div id="ret"></div>
        $('#ret').load(
        "/greet",
        {name: 'Brad'}
    )
    复制代码

ajax的基础操作

  • ajax四步

        let xhr = new XMLHttpRequest() //创建xmlHttpRequest对象也叫创建ajax实例。
        xhr.open('GET',url?xxx=xxx,false)//打开URL(配置发送请求信息),第三个参数是是否异步,默认是true,问号传参
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                let result = xhr.responseText
                 }
            }//监听AJAX状态,在状态码为某个时候(有0,1,2,3,4),获取服务器响应内容
       xhr.send()  //发送请求,send中放的是请求主体内容,设置请求体可以实现将信息传递给服务器。(传参)
    复制代码
  • 通过设置请求头可以把信息传递给服务端xhr.setRequestHeader()(传参)

  • ajax的五种状态码

状态码描述
0(未初始化)还没有调用send()方法
1(载入)已调用send(),正在发送请求
2(载入完成)send()执行完毕,已接收全部的响应内容
3(交互)正在解析响应内容
4(完成)响应内容解析完成,可以让客户端调用

XML

  • XMML是可扩展的标记语言,被设计用来传输或者存储数据的。

常用的JQ事件

Event函数绑定函数至
$(document).ready(function===$(function(){})当文档加载完毕后执行函数
$(select).click(function)===$(select).on('click',function(){})当所选元素被点击时出发函数
$(select).dbclick(function)当所选元素被双击时触发函数
$(selectselect).focus(function)当所选元素的获得焦点时触发函数
$(select).mouseover(function(){})当鼠标经过所选元素时,触发函数
文章分类
阅读
文章标签