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({
        width: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()