jquery 快速入门学习总结

jquery 快速入门学习总结

jquery简介

    jquery 是一个免费,开源的javascript 库.

jquery作用

    方便完成web前端的工作,例如节点操作,元素操作,事件绑定,ajax操作,并且解决了大部分的兼容问题

jquery使用配置

   1.本地配置

   1.1 下载jquery文件,  www.jquery.com

   1.2 引入,放在文件同目录

      <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.1.8.3.min.js"></script>

   2.远程访问文件

      <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.xiaohigh.com/jquery.js"></script>

   3.检测配置

        alert($);  $ 是jquery对象的简写        alert(jQuery);

   4.元素基本获取

     4.1 通过id查找元素 $('$id');

     4.2 通过标签名或者元素获取 $('div');

     4.3 通过class属性获取 $('.class');

     4.4 逗号并列获取 $('$id,.class');

     4.5 空格层级获取 $('$id .class')    //中间有空格

   5.过滤获取

     5.1 获取第一个元素$('li:first')

    5.2 获取最后一个元素$('li:last')

    5.3 获取指定索引的元素 $('li:eq(5)') 或者 $('li').eq(5);

    5.4 获取包含指定文本的元素$('li:contains("国")')

    5.5 通过属性查找元素 $('input[name=username]') 通过单个属性名和属性值查找

      $('input[type=text][name=phone]') 通过多个属性名和属性值进行查找

   6.父子节点获取(重点)

    6.1 获取所有的子元素$('ul').children()

    6.2 获取第一个子元素$('ul li:first-child')

    6.3 获取最后一个元素$('ul li:last-child')

    6.4 获取指定索引的元素$('ul li:nth-child(1)')

    6.5 获取下一个元素 $('#id').next()

    6.6 获取上一个元素$('#id').prev()

    6.7 获取父级元素$('#id').parent()

    6.8 获取先辈元素$('#id').parents('tr')  (重点)

     6.9 获取同辈元素$('#id').siblings()

    6.10 在父级元素中查找元素$('ul').find('.class')

   7.元素的操作

    7.1 attr()

    attr传两个参数的时候是设置,传一个的时候是获取

    可以对属性进行操作,例:<div id='dvs'></div>

    $('#dvs').attr('class','cur');  设置属性

    $('#dvs').attr('class');    获取属性

    7.2 removeAtrr()

    $('#dvs').removeAttr('src');  移除属性

   8.样式操作

    8.1 css()

     例:$('#divs').css('width','200px'); 设置css属性 在括号内可通过中括号进行多个属性设置

    8.2 addclass()

     添加类样式   

    8.3 removeClass()

     移除类样式

   9.文本操作    

    9.1 text()

    $('#dvs').text('<a href="">汽车</a>'); 设置结果会包含a标签

     9.2 html()

    $('#dvs').html('<a href="">生活</a>');设置结果只有值(生活)

    9.2 from元素的值操作

    值的获取和设置

    9.2.1 $(element).val() 获取

    9.2.2 $(element).val('牛') 设置

    9.3 其他

    9.3.1 相对于文档的偏移量 offset()

        $('#dvs').offset().left

    9.3.2 获取元素相对于父级的偏移量 position()

        $('#dvs').position()

    9.3.3 元素的滚动距离(既可以获取也可以设置)  scrollLeft() scrollTop()

    9.3.4 宽度和高度   

    width 获取可视区域的宽度 $(window).width()

          获取整个文档的宽度$('document').width()

          获取元素的宽 $('element').width()

    height 获取可视区域的高度 $(window).height()

          获取整个文档的高度 $('document').height()

          获取元素的宽 $('element').height()

     10 节点操作

    10.1 创建节点操作

    $('<div></div>')

    $('<div class='cur'><span>hello world</span></div>')

    10.2 插入节点

     10.2.1 内部尾部添加

    $(parent).append(newNode)

    newNode.appendTo(parent)

    10.2.2 内部头部添加

    $(parent).prepend(newNode)

    $(newNode).prependTo(parent)

    10.2.3 元素外部之后添加

    $(element).after(newNode)

    newNode.insertAfter(element)

    10.2.4 元素外部之前添加

    $(element).before(newNode)

    newNode.insertBefore(element)

    10.3 删除节点

    $(element).remove()  删除当前节点

    $(element).empty()   清空节点

    10.4 替换节点

    替换节点  $(element).replaceWith(newNode)

    10.5 克隆节点 

    克隆节点 $(element).clone(true)

    10.6 包裹元素

    包裹元素   $(element).wrap('<div></div>')   当前的元素被其他的元素包裹

    $(element).unwrap()   解除包裹

    11. 事件绑定

    基本绑定

    $(element).click(function(){})

    $(element).dblclick(function(){})

    加载完毕事件

    $(document).ready(function(){})  //和onload一样

    $(function(){})

    方法绑定

    $(element).bind('click',function(){})

    $(element).unbind()

    $(element).on('click', function(){})

    动态绑定

    $(element).live('click', function(){})    可以多个同时绑定,点击之后同时出发一个函数

    11.2 事件触发

    $(element).trigger('click')     //自动触发事件

    11.3 阻止事件冒泡和默认行为

    return false

    11.4 获取当前鼠标的位置和按键

    $(element).click(function(e){})

    var cx = e.clientX

    var cy = e.clientY

    var px = e.pageX

    var py = e.pageY

    12 ajax

    $.get('1.php',{a=100&b=200},function(data){})

    $.post('1.php',{num=10&id=10},function(data){})

    $.ajax({

    url: '1.php',   url请求的脚本

    data: 'id=100&page=10',    data发送的数据

    dataType: 'json',    dataType数据的类型

    type: 'GET',    type请求的类型  get或post

    success: function(data){},    success成功的执行代码

    error: function(){},         error失败的执行代码

    timeout:3000,     timeout 超时时间

    async: false    async是否异步

    })

    重点:在php中的数组返回给javascript 读取

    $arr = ['name'=>'世强','age'=>21,'height'=>'167cm'];

    $res=json_encode($arr);

    echo $res;

    //get发送ajax

$.get('4.php',{a:100},function(data){

// console.log(data);

//第一种

//eval('var arr ='+data);

// console.log(data);

//第二种

//var arr = JSON.parse(data);

console.log(arr);

//第三种 json

}.json)

    13特效

    快速显示和隐藏

    $(element).hide()

    $(element).show()

    滚动显示和隐藏

    $(element).slideDown()

    $(element).slideUp()

    渐隐渐显

    $(element).fadeIn()

    $(element).fadeOut()

    自定义动画

    $(element).animate({},2000)

    停止

    $(element).stop()

    延时

    $(element).delay(2000)