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()
原文地址:https://www.cnblogs.com/dongxuelove/p/12779741.html