:::info 一个javascript库,属于前端必学的一个框架
这个没多说的，直接上 :::

1.选择器：$(‘el’)

  1. /*普通元素选择*/
  2. $('#id .class el')                //正常可选择ID|类|元素,基本支持CSS的选择写法可看css里6，7
  3. $('li:eq(3)')                            //选择第四个li
  4. $('li:gt(3)')                            //选择索引>3的所有li
  5. $('li:lt(3)')                            //选择索引<3的所有li
  6. $("div:has(p)")                        //获取所有内部有P元素的DIV元素
  7. $(":contains('Hello')")        //所有包含文本 "Hello" 的元素
  8. $(":empty")                                //所有空元素
  9. index()                                        //获取元素索引
  10. length()                                    //获取元素数量

2.事件

  1. $('div').on('事件'，function(){})            //向元素添加一个事件
  2. $('div').one('事件'，function(){})            //向元素添加一个事件只执行一次
  3. click()                    //单击
  4. dbclick()                //双击
  5. blur()                    //失去焦点
  6. focus()                    //获得焦点    
  7. select()                //文本被选中时执行
  8. submit()                //提交时执行
  9. change()                //当元素发生变化且失去焦点时触发
  10. ready()                    //文档加载后执行
  11. resize()                //窗口大小改变时执行
  12. scroll()                //屏幕滚动时执行
  13. trigger()                //触发元素上的所有事件

3.效果

  1. animate();           //动画
  2. fadeIn();                 //改变透明度一直到显示
  3. fadeout();          //改变透明度一直到不显示
  4. fadeToggle()        //切换方法
  6. show()                    //显示
  7. hide()                    //隐藏
  8. toggle()                //切换方法
  10. slideDown()            //改变高度显示
  11. slideUp()                //改变高度隐藏
  12. slideToggle()        //改变高度切换

4.HTMl、CSS处理

  1. hasClass()                //检查是否存在class,返回boolean
  2. addClass()                //添加class
  3. removeClass()            //删除class
  4. toggleClass()            //切换class
  6. after()                        //给元素之后添加
  7. before()                    //给元素之前添加
  8. append()                    //在元素结尾添加文本
  9. appendTo()                //在元素结尾添加html
  10. prepend()                    //在元素开始添加文本    
  11. prependTo()                //在元素开始添加文本
  12. text()                        //修改文本
  13. html()                        //修改元素内的html
  14. empty()                        //清空元素内容
  15. remove()                    //删除元素
  16. clone()                        //添加拷贝元素
  17. position()                //获取元素位置坐标
  18. add()                            //在元素内添加一个新元素
  21. attr()                        //获取或设置元素属性
  22. removeAttr()            //删除元素属性
  24. val()                            //获取元素的值
  25. css()                            //设置元素css
  26. height()                    //获取元素高度
  27. innerHeight()            //获取元素高度包含padding不包含border    
  28. innerWidth()            //获取元素宽度包含padding不包含border
  29. outerHeight()            //获取元素高度包含padding包含border
  30. outerWidth()            //获取元素宽度包含padding包含border
  32. $("li").each(function(){})        //处理所有li元素
  33. is()                                                        //判断选择器是否正确
  34. next()                                                    //下一个同级元素
  35. nextAll()                                                //后面所有同级元素
  36. prev()                                                    //上面一个同级元素
  37. prevAll()                                                //前面所有同级元素
  38. parent()                                                //返回父级
  39. parents()                                                //返回所有腹肌
  40. siblings()                                            //返回所有同级元素

5.ajax

  1. /*方法不少，但是会这一个就行*/
  2.   $.ajax({
  3.     url:"请求地址",
  4.     type:'请求方式',
  5.     data:'请求参数',
  6.     async:'是否异步'
  7.     cache:'请求页面是否缓存',
  8.     contentType:'请求参数数据类型',
  9.     timeout：'设置超出请求时间',
  10.     dataType:'预期服务器返回数据类型'
  11.     beforeSend:function(xhr){
  12.      '请求之前执行'
  13.   },
  14.     success:function(result){
  15.       '请求成功'
  16.     },
  17.     error:function(xhr,status,error){
  18.       '返回失败'
  19.      },
  20.     complete：function(xhr,status){
  21.        '成功失败都执行'
  22.     }
  23. });
  27. // JQ 1.5 版本之后的 AJAX 方法
  28. /**
  29.  * done : 这是一个成功的回调函数
  30.  * fail : 这是一个失败的回调函数
  31.  */
  32. // (写法1)
  33. $.ajax('./test1.json').done(function() {
  34.     console.log('成功了 ');
  35. }).fail(function() {
  36.     console.log('失败了');
  39. // (写法2)
  40. $.ajax('./test1.json').then(function() {
  41.     console.log('成功了');
  42. }, function() {
  43.     console.log('失败了');
  44. })

6.杂项

  1. data()                    //给元素添加或者获取一个数据，前端是看不见的
  2. removeData()        //删除元素添加的数据
  3. jquery                    //获取jq版本
  5. /*执行成功后在执行其他,ajax还是建议直接用promise*/
  6. $.when(ajax1, ajax2).done(function(){
  7.     alert("done");
  8. }).fail(function(){
  9.     alert("fail");