欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery的一点小结

程序员文章站 2022-07-01 20:47:01
1、jQuery常用选择器 筛选: $('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').eq(5); //选择第6个div元素 选择器的转移: $('#box... ......

 

 

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('服务器超时,请重试!');
        }
    });