jQuery的一点小结

 

 

1、jQuery常用选择器
    筛选：
    $('div').has('p'); // 选择包含p元素的div元素
    $('div').not('.myClass'); //选择class不等于myClass的div元素
    $('div').eq(5); //选择第6个div元素
    选择器的转移：
    $('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
    $('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
    $('#box').next(); //选择id是box的元素后面紧挨的同辈元素
    $('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
    $('#box').parent(); //选择id是box的元素的父元素//通过儿子找爸爸
    $('#box').children(); //选择id是box的元素的所有子元素//通过爸爸找儿子（可指定）children('li')
    $('#box').siblings(); //选择id是box的元素的同级元素//可以找到同级中的一个（可指定）siblings('li')具有很强的排他性
    $('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素
    .eq 根据下标找元素 与 .index获取元素下标 一般是一起使用
    还有一类选择器就是css中的选择器
    
2、具备jQuery特有的方法
    jQuery对象.css()
    jQuery对象.addClass()
    设置class等属性
        jQuery对象.addClass() 添加类名
        jQuery对象.removeClass() 删除的是类名中的一个值
        jQuery对象.toggleClass() 切换类
        特点：在removeClass()中不写参数表示全部删除
        
3、jQuery动画的实现
    1、jQuery对象.animate()
        jQuery对象.animate(参数一：要改变的样式属性值，写成字典的形式，参数二：动画持续的时间，单位为毫秒，一般不写单位，
        参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动，参数四：动画回调函数，
        动画完成后执行的匿名函数)
    2、更便捷的动画实现
        jQuery对象.hide()          隐藏
        jQuery对象.show()           显示
        jQuery对象.toggle()        切换隐藏显示
        jQuery对象.fadeIn()           淡入
        jQuery对象.fadeOut()       淡出
        jQuery对象.fadeToggle()    切换淡入淡出
        jQuery对象.slideUp()       卷起
        jQuery对象.slideDown()     展开
        jQuery对象.slideToggle()   切换卷起展开
        jQuery对象.fadeTo(时间，透明度（写成小数）)  设置透明度
        
4、对元素的操作
    jQuery对象.prop("src")               根据src获取src的值
    jQuery对象.prop("src","具体的值")     设置src的值
    jQuery对象.prop({})                     可以写多个键值对
    jQuery对象.val()                     把value单独提出来，获取value的值
    jQuery对象.val("具体的值")             设置value的值

5、jq中的循环
    $('li').each(function(aa){
    //形参表示的就是标签的索引值
    alert()
    })
    js中参数非常的随意
    获取焦点 focus
    失去焦点 blur
    拥有更多的时机做事情
    进入的子元素或者触发或者不触发命令
    推到：标签父子级，命令绑定到父级
    hover(function(){},function(){})
            进入        移出
            
6、jQuery对象.submit()提交表单
    表单提交不会直接选择form标签选择器html5中一个HTML页面可以有很多个form标签，为了保证一致性都是id的形式选择器
    工作中不是直接的提交需要条件判断：如果所有表单控件合法提交否则报错不能提交数据
    preventDefault()和return false 都是阻止默认时间的发生
    
7、事件冒泡：
    父子级标签且都绑定相同的事件，触发子级的命令会逐层像父级触发
        event.stoppropagation() 和 return false 都是阻止事件冒泡
    事件的冒泡是客观存在的现象，不会因为没有响应表示没有冒泡
    根据自己的需求来确定在哪return false 阻止冒泡
    看不见的遍历是隐式迭代浪费资源
8、事件委托/事件代理：委托给这个标签的父标签
    $('ul').delegate(事件实际发生在谁身上,事件属性,匿名函数写命令)
    作用：1、提高代码的执行效率
          2、可以给未来元素绑定命令
    拓展：on(事件属性，匿名函数)只能给未来元素绑定命令
    DOM 文档对象模型 document object model
    js内置：内置的一个结构化表现手法，通过结构化表现手法把所有标签实现了一个倒置的树状结构图
    针对性的寻找标签
    标记 == 标签 == 元素 小于 节点(标签，标签的属性，标签的内容)
    增加删除
    增加标签：子级和同级
    删除标签：1、声明变量保存节点标签数据
              2、使用追加函数节点变量追加到相应的位置
    var $li = $('<li>666</li>')
    子级：
        $('ul')append($li)     添加到子级之后
        $li.appendTo($('ul'))
        $('ul').prepend($li)    添加到子级之前
        $li.prependTo($('ul'))
    同级：
        $('ul').after($div)      添加到同级之后
        $div.insertAfter($('ul')) 
        $('ul').before($div)     添加到同级之前
        $div.insertBefore($('ul'))
    删除：
        $('ul').remove()     删除节点
        $('ul').empty()       清空节点
$(function(){}) 匿名函数
$('div')选择器        
$('<li>666</li>')标签    
$(this)原函数

9、$.ajax使用方法
    常用参数：
        1、url请求地址
        2、type请求方式，默认是'GET'，常用的还有'POST' 
        3、dataType设置返回的数据格式，常用的是'json'格式，也可以设置为'html ' 
        4、data设置发送给服务器的数据
        5、success设置请求成功后的回调函数
        6、error设置请求失败后的回调函数
        7、async设置是否异步，默认值是'true'，表示异步
    $.ajax({
        url: '/change_data',接口的请求地址接口：为了得到数据的叫接口
        type: 'GET',
        dataType: 'json',通用数据格式
        success:function(dat){
            alert(dat.name);
        },
        error:function(){
            alert('服务器超时，请重试！');
        }
    });