一、获取元素

    直接用 $ 符号获取元素，例如：

    console.log($(‘.title a’));

    console.log($(‘.nav’));

    使用原生js获取元素和使用jQuery获取元素，如果元素不存在都不会报错，但是原生js会返回null,jQuery不会。

    二、在选择元素上绑定事件方法，可以绑定多个事件的事件处理函数

    on(even, [selector], [data], fn)

    even：表示事件，不加on，可以给事件绑定多个事件处理函数，也可以绑定多个事件，多个事件写在一个引号中，空格隔开即可；

    selector：可选，表示事件委托的元素（表示的是委托的元素）；

    data：可选的，可以传递数据，数据格式是对象；

    fn：事件处理函数，函数名或者函数体；

    （tips：中括号[]中的参数是可选的）

    实例：

    $(‘.nav’).on(‘click mouseover’, function(){

    console.log(1);

    })

    三、在选择的元素上移出一个或多个事件处理函数

    off([event])

    event是可选的，不写表示移除选定元素的全部事件处理函数，写了表示移出指定事件的事件处理函数

    $(‘title a’).off(); //移除全部事件处理函数

    $(‘title a’).off(‘event’); //移出指定事件的处理函数

    四、给选定元素添加一个或多个的类名

    addClass(classname)

    calssname：添加的类名；

    $(.title a).addClass(‘active’); // 给a标签加了个active的类名

    五、给选定元素删除一个或多个类名

    removeClass([fn|class])

    六、获取第N个元素，N就是索引，正数从前往后数，负数从后往前数

    eq(index|-index)

    七、搜索匹配的元素，并返回相应元素的索引，从0开始计数

    index([selector|element])

    八、获取当前元素之外的兄弟元素

    siblings([expr])

    九、创建自定义动画的函数

    animate(params, [speed], [easing], [fn])

    params：运动属性的终值，对象格式表示；

    speed：可选，运动的速度，单位为ms；

    easing：可选，运动的形式，linear匀速，swing缓冲（默认值）

    fn：可选，链式运动的回调函数。

    $(‘.box”).on(‘mouseover’, function() {

    $(this).stop(true).animate({ // 省略单位，如果要添加单位就要写字符串格式的数据

    width:500,

    height:’500px’

    });

    });

    jQuery运动如果触发了就会加载进队列中，一直到全部完成，如果触发速度大于动画时间就会造成动画触发了但还在队列中排队，解决的办法就是在animate前面加上 stop() 方法。

    十、停止所有在指定元素上正在与运行的动画

    stop([clearQueue], [jumpToEnd])

    clearQueue：如果设置为true，则清空队列，立即结束当前动画

    jumpToEnd：如果设置为true，则完成队列，立即完成当前动画

    十一、显示隐藏

    显示：show(speed, [easing], [fn]) ，显示隐藏的匹配元素（通过被缩放的宽高和透明度逐渐还原为原始状态）

    隐藏：hide(speed, [easing], [fn]) ，隐藏显示的匹配元素（通过缩放宽高直到零，透明度逐渐变为0）

    十二、读写css属性

    css(name|pro, [val|fn])

    读：

    $(‘.box’).css(‘width’);

    写：

    $(‘.box’).css(‘height’, ‘100px’);

    整体写入：

    $(‘.box’).css({ // 忽略单位

    width:100,

    height:100

    });

    十三、尺寸，读写盒子宽高

    width()：读写元素css的width值

    innerWidth()：读写元素css的width值 + padding值

    outerWidth()：读写元素css的width值 + padding值 + border值

    outerWidth(true)：读写元素css的width值 + padding值 + border值 + margin值

    读写高的值与宽类似

    height()

    innerHeight()

    outerHeight()

    outerHeight(true)

    十四、元素的属性

    attr(name|properties|key, value|fn)：设置或返回被选元素的属性值，包括自定义属性。

    $(‘.box’).attr(‘class’); // 读.box元素的class类名

    $(‘ul li’).attr(‘class’,’list’); // 给li标签加一个list的class类名

    prop(name|properties|key, value|fn)：设置或返回被选元素的属性值，不包括自定义属性，语法与attr()方法类似。

    十五、获取匹配元素在当前视口的相对偏移（offsetLeft + offsetTop）

    offset([coordinates])：返回值是一个对象，包含两个属性（left/top）

    $(‘.box’).offset()

    十六、val([val|fn|arr]) 获得匹配元素的当前值。取代原生js里面的value

    1. $('input').on('blur', function() {
    3.     console.log($(this).val());
    5. });

    十七、追加

    1. append(content|fn)向每个匹配的元素内部的后面追加内容。取代原生js里面的appendChild方法
    3. prepend(content|fn)向每个匹配的元素内部的前面追加内容。
    5. $('.box').append('<p>我是在box的内部的后面追加</p>');
    7. $('.box').prepend('<p>我是在box的内部的前面追加</p>');

    十八、remove([expr])从DOM中删除所有匹配的元素。

    1. $('.box').remove();

    十九、clone([Even[,deepEven]])克隆匹配的DOM元素并且选中这些克隆的副本

    1. 两个参数都是布尔值，分别表示是否克隆子元素以及身上的事件。
    3. $('body').append($('.box').clone(true));

    二十、find(expr|obj|ele)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

    1. $('.top').find('.top-left-main ul');
    3. $('.top').find('.top-left-main ul li');
    5. $('.top').find('.top-left-main ul').find('li a').find('span')

    二一、parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

    1. console.log($('.hehe').parents());
    3. console.log($('.hehe').parents('body')); //筛选某个父元素

    二二、获取上一个下一个兄弟阶段

    1. next():获取下一个兄弟节点
    3. prev():获取上一个兄弟节点

    二三、$.ajax(url,[settings])通过HTTP请求加载远程数据 - 前后端交互的核心

    1. 对象做参数
    3. $.ajax({
    5.     method:'post', //get和post，可以省略，默认是get
    7.     url:'http://localhost/JS2203/week05/Day26_ajax/code/taobaoapi.php', //接口地址
    9.     async:true, //是否异步，true异步，false同步
    11.     data: { //传输数据
    13.         name:'zhangsan',
    15.         age:18,
    17.         sex:'男'
    19.     },
    21.     dataType:'json', //数据类型，如果是json类型，自动将获取的数据转换成对象，不需要JSON.parse()
    23.     success:function(d) {
    25.         console.log(d); //接口返回的数据
    27.     },
    29.     error:function() {
    31.     }
    33. });
    35. $.ajax({
    37.         method:'post', //get和post，可以省略，默认是get
    39.         url:'http://localhost/JS2203/week05/Day26_ajax/code/taobaoapi.php', //接口地址
    41.         async:true, //是否异步，true异步，false同步
    43.         data: { //传输数据
    45.             name:'zhangsan',
    47.             age:18,
    49.             sex:'男'
    51.         },
    53.         dataType:'json'//数据类型，如果是json类型，自动将获取的数据转换成对象，不需要JSON.parse()
    55.     })
    57.     .then(function(d) {
    59.         console.log(d);
    61.     })
    63.     .catch(function() {
    65.     });

    二四、load(url, [data], [callback])载入远程HTML文件代码并插入至DOM中。

    1. $('.ad').load('http://localhost/JS2203/week07/Day31_1_jquery/code/scale/scale.html');
    3. 注意：
    5. 这里的地址可以是相对地址，前后端通讯必须采用完整的地址(url)
    7. 和当前引入的页面相关的js代码必须放到[callback]里面实现

    二五、遍历数组和对象

    1. $.each(arr/obj,callback)通用例遍方法，可用于例遍对象和数组。
    3. letarr = ['apple', 'orange', 'banana'];
    5. $.each(arr, function(index, value) { //index:数组的索引或者对象的属性，  value:值
    7.     console.log(value);
    9. });
    11. constobj = {
    13.     name:'zhangsan',
    15.     age:18,
    17.     sex:'男'
    19. };
    21. $.each(obj, function(index, value) { //index:数组的索引或者对象的属性，  value:值
    23. console.log(value);
    25. console.log(index);
    27. });

    二六、not(expr/ele/fn)筛选，排除某个元素

    二七、hover([over,]out)鼠标划入划出

    二八、jQuery获取标签的文本内容和js不一样，主要有三个方法：

    1.html()

    2.text()

    3.val()

    html()相当于js里面的innerHTML、text()相当于js里面的innerText()、val()主要用来获取表单元素的值类似于js里面的value。

    在使用原生JS时可以使用document.getElementById(“element”).innerHTML = “展示的内容”

    来赋值

    但是在使用jQuery时必须使用

    $(“element”).html(‘展示的内容’)

    来赋值，上面三个方法都是如此。