zoukankan      html  css  js  c++  java
  • jQuery-很上头的语言基础整理

    jQuery是js的一个类库,主要封装的是js中DOM操作部分,使用和原生js一样

    1.需要先引入页面才可以使用

    代码引入:<script src='jquery.js'></script>
    

    2.基本方法:

    起点是从获取DOM元素开始

    获取方法:$()

    小括号里写:

    id选择器      $("#id名")
    class选择器   $(".class名")
    元素选择器    $("标签名")
    子级选择器    $("父级>子级")
    后代选择器    $("父级 子级")
    

    jquery封装的选择器

    基本:

    :even        偶数下标,奇数行
    :odd         奇数下标,偶数行
    :lt(index)   小于多少
    :gt(index)   大于多少
    :eq(index)   选择兄弟排名中的第几个
    

    表单:

    :text        找所有的type="text"的input标签
    :radio       type="radio"的单选按钮
    :checkbox    type="cheakbox"的多选按钮
    :checked     被选中的
    

    3.操作元素的内容,属性,样式

    操作内容:

    获取:
    1.双标签:html()
    2.input:val()
    设置:
    1.双标签:html('新内容')
    2.input:val('新内容')
    

    操作属性:

    获取:attr('属性名')
    设置:attr('属性名','新的值')
    

    样式操作:

    获取:css('样式名')
    设置:css('样式名','新的值')
          css({
              "样式名1":"新的值",
              "样式名2":"新的值"
          })
    

    额外封装的:

    css操作类操作:
       addClass():添加类名
       removeClass():删除类名
       toggleClass():切换类名
    尺寸操作:
       height():高度
       width():宽度
       scrollTop():滚动高度
       scrollLeft():滚动距左边距离
    

    4.绑定事件

    $().事件名(function(){功能})

    事件名:鼠标事件 键盘事件 表单事件

    事件委托:$().on('事件名',#####'target',function(){功能})

    额外:one():绑定的事件只会执行一次

    5.DOM的增删查改

    增:

    创建元素:$('标签')
        如:$("<li><div><p class='title'>"+new.title+"<img src="+new.url+"></div></li>)
    添加到页面:
        尾部添加:父级.append(子级)
                子级.appendTo(父级)
        指定位置添加:父级.prepend(子级)
                    子级:prependTo(父级)
    

    删除:

    empty():元素.empty()删除指定元素中所有子级元素
    remove():元素.remove()指定的元素被删除
    

    改:

    replaceWith() 
    replaceAll()
    

    查:

    父级关系:parent()
    祖先级关系:parents(val)
    子级关系:children()
    后代关系:find(val)这个里面必须有参数
    兄弟关系:
        上一个兄弟:prev()
        上面所有的兄弟:prevall()
        下一个兄弟:next()
        下面所有的兄弟:nextall()
        所有兄弟:siblings()
    筛选:
        eq()
        first() 第一个
        last() 最后一个
        is() 验证作用
    

    6.动画设置

    显示与隐藏

    show([speed,easing,function]) speed:毫秒单位的时间值
    hide([speed,easing,function])
    用法:元素.show()/元素.hide()
    

    滑动

    slideDown()    向下滑动,显示
    slideUp()      向上滑动,隐藏
    slideToggle()  滑动切换
    

    stop()方法

    停止所有在指定元素上正在运行的动画
    stop(clearQueue,gotoEnd)
    这个两个参数可选值是布尔值
    stop(flase,flase):不请空动画队列,不立即跳到动画最后
    stop(true,true):请空动画队列,立即跳到动画最后
    stop(flase,true):不请空动画队列,立即跳到动画最后
    stop(true,flase):请空动画队列,不立即跳到动画最后
    

    淡入淡出

    fadeIn()     :淡入
    fadeOut()    :淡出
    fadeToggle() :切换
    fadeTo(opacity)     :淡出到指定透明度 opacity[0-1]
    

    index()方法

    animate()

    高级动画,animate(options,[speed,easing,fn])
    options:可以动画的属性有哪些
        不能动画:背景
        几乎带px单位的都可以动画
        接收参数时是字典形式的
        animate({
            40,
            height:100
        })
    

    7.请求数据(前后台数据交互)

    form表单

    <form action='url' method='get/post'>
         <input type='text'/>
         <input type='password'/>
         <input type='radio'/>
         <input type='checkbox'/>
         <textarea></textarea>
         <input type='submit'/>
    </form>
    

    点击提交(type='submit')时,form表单会自动把name属性值作为键名,value属性值作为键值,组成键值对形式,然后form表单会按指定的method方式把数据发送到指定的URL路径去

    method提交方式:

    get:
    数据会显示在地址栏,显示的形式是URL?数据,数据是键值对形式存在,多个键值对之间使用&符号连接
    ?最多出现一次,&可以出现多次
    post:
    数据不再地址栏里显示,可以在network监听工具里监听
    在请求头中数据不会出现?和&符号
    正常情况下是看不到这个数据的
    

    ajax

    jQuery中的ajax
    $.ajax({
        url:'地址',
        type:'get/post',
        data:{},
        dataType:'json/jsonp',
        success:function(res){
            //请求成功,接收返回值
        }
    })
    
    ajax不能跨域请求
        两个网址:协议 主域号 端口号 完全相同时,这时两个网址完全相同
       (任意其一不同,即为跨域请求)
    解决跨域:
        1.jsonp:在$.ajax({dataType:'jsonp'}),需要后台支持jsonp形式
        2.cors:需要后台配合
        3.后台设置允许所有或指定网址能直接访问
    简写形式:
        $.get(url,data,function(res){})
        $.post(url,data,function(res){})
    

    滚动

    获取滚动高度:$(document).scrollTop()
    获取页面高度:$(document).height()
    可视窗口高度:$(window).height()
  • 相关阅读:
    C++学习总结 复习篇2
    C++ 学习总结 复习篇
    Git 安装与使用
    前两周工作总结
    [bzoj1033] [ZJOI2008]杀蚂蚁antbuster
    [bzoj1031] [JSOI2007]字符加密Cipher
    [bzoj1030] [JSOI2007]文本生成器
    [bzoj1029] [JSOI2007]建筑抢修
    [bzoj1028] [JSOI2007]麻将
    [bzoj1026] [SCOI2009]windy数
  • 原文地址:https://www.cnblogs.com/dongxuelove/p/12779741.html
Copyright © 2011-2022 走看看