javaScript库

jquery
用原生 js 写代码的时候，比如获取节点：


$('#test'); // jquery

再比如发送 ajax 请求：

let xhr = null;
// 处理代码的兼容性问题
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// jquery
$.ajax({
  url : 'xxxxx',
  type : 'GET',
  success : function(data){
    // 做数据拿回来之后的处理
  }
})```
**jquery 的特点如下**


- 轻量
- 强大的选择器
- DOM 操作的封装
- 完善的 ajax
- 解决了大部分的兼容性问题
- 链式操作
**jquery 版本**
目前最新的版本是 3.x。

如果要考虑 IE8 及其以下版本的浏览器的兼容性，只能用 1.x 的版本。也就是说，2.x 和3.x没有考虑兼容性的问题。

一般每个版本的jquery有比如 jquery-1.1.2 和 jquery-1.1.2.min.js，有min的代表的是压缩版。
**jquery 核心方法**
在 jquery 中，最最最核心的就是 jquery 方法
`jquery()
// 该方法有一个别名
$()`
该方法可以将一个对象转换为 jquery 对象，注意jquery对象的方法和DOM对象的方法是不能够混用的。

如果是jquery对象，就只能调用jquery的方法，如果是DOM对象，就只能调用DOM对象的方法。
```// 我们通过这个方法，可以获取DOM节点
$('#test')
$(document.body)
$([1,2,3])
$('<p></p>')

通过上面的代码，我们可以看出，构建一个jquery对象的方式很多。
jquery对象如何转成DOM对象。

通过get方法，可以将一个jquery对象转换为DOM对象

$('#root')[0].innerHTML = 'xxx';

each 方法

循环 jquery 对象的方法
$('p').each((item)=>{ // 做具体的操作 })
document.ready 方法
这个方法就类似于原生 js 中的 window.onload 事件。
`$(document).ready(function(){});

// 或者

$(function(){})`
虽然这个方法类似于 window.onload 事件，但是两者还是有区别的。

window.onload 是在DOM文档树加载完所有文件（包括图片加载）后才会执行。

document.ready 方法是在 DOM 文档树加载后就马上执行。
jquery 选择器
jquery 中的选择器，绝大部分和 css 是相同的，但是也有一些 jquery 特有的选择方式：

:first
:last
:even
:odd
:eq
:gt
:lt
:header
:animated
:contains(text)
:has(selector)
:parent
:hidden
:visible
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
:selected
jquery 筛选器
在 jquery 中，除了选择器以外，还提供了一组筛选器。

我现在已经有一组 jquery 对象


// 上面的代码，我们已经获取到了一组 jquery 对象，接下来我们就可以从这一组 jquery 对象中筛选我们要的某一个
 jquery 对象

$('p').eq(0)

eq()
first()
last()
hasClass()
filter()
is()
map()
has()
not()
slice()
children()
find()
next()
nextAll()
nextUntil()
parent()
parents()
parentsUntil()
prev()
prevAll()
prevUntil()
siblings()
contents()
end
使用筛选器的时候，还需要注意 get 和 eq 方法的区别：
$('p').get(0); // 将 jquery 对象转为 DOM 对象

$('p').eq(0); // 选择第一个 jquery 对象
jquery 操作属性的方法
在 jquery 中，方法有一个特点，获取和设置方法同名。

        console.log($('#op').attr('class'));

        // 设置元素属性

        // $('#op').attr('class','test2');

        $('#op').attr({

            'class' : 'test3',

            'id' : 'opp'
        });

removeAttr：删除某个属性


        $('#op').removeAttr('id'); // 删除一个

       $('#op').removeAttr('id class'); // 删除多个

prop
removeProp

这一组方法也是做属性操作，和 attr 那一组方法的区别。

prop 和 removeProp 和 attr 那一组的区别在于他们是操作特殊属性。
`$('#test').prop('checked'); // 获取这个复选框的选中状态

$('#test').prop('checked', false);
`
类似的属性还有：

disabled
autofoucus
readonly
mutiple
checked
selected
addClass：添加一个类
removeClass：删除一个类
toggleClass：如果有这个类，就删除，否则就添加


            $('div').toggleClass('bgc');

        });```
- html
- text
- val

这一组方法对应的是原生 js 的 innerHTML，innerText，value
```  console.log($('#btn').html())

       $('#btn').html('这是一个按钮');

jquery 操作 css 的方法
最最核心的就是 css 方法。


        $('#btn').click(function(){

            // $('div').css('background-color','red');

            $('div').css({

                'background-color' : 'red',

                'width' : '60px',

                'height' : '60px'

            })

        })

height
width
innerHeight
innerWidth
outerHeight
outerWidth
scrollTop
scrollLeft
offset：节点相对于视口的位置
postion：相对于父元素的偏移位置
jquery 文档处理方法
这里就是涉及到节点的操作。所谓节点的操作，就是指创建节点、修改节点、删除节点。
在 jquery 中，就提供了大量的方法来简化这些操作
append
appendTo
这两个方法本质是一样的，主要就是顺序的区别。示例如下：

 $('#btn').click(function(){

            // $('div').append('<p>this is a test</p>');

            $('<p>test!!!</p>').appendTo('div');

        })

append
appendTo
prepend
prependTo
after
before
insertAfter
insertBefore
wrap
unwrap
wrapAll
warpInner
replaceWith
replaceAll
empty
remove
detach

remove 和 detach 的区别如下：


        $('div>p:first').click(function(){

            console.log('我是一个段落');

        })

        $('#btn').click(function(){

            i = $('div>p:first').detach();

            console.log(i);

        })

        $('#btn2').click(function(){

            $('div').append(i);

        })

-clone
jquery 事件处理
在 jquery 中，事件的绑定，根据事件类型提供了对应的方法。

          $('p').click(function(e){

            console.log(e); // 事件对象也能够正常获取

        });

事件对象：所谓事件对象，首先它是自动生成，当你触发事件的时候，就会生成这么一个对象。通过这个对象，我们可以拿到用户触发事件时的一些具体信息。

key 事件，我们往往需要知道用户究竟按的是哪一个键，那么这个重要信息就在事件对象里面。

ready
on
off
one
delegate
hover
blur
change
click
dblclick
error
focus
focusin
focusout
keydown
keyup
mousedown
mouseenter
mouseleave
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload
在上面诸多的事件方法中，需要掌握的就是 on 和 off 方法。
on：绑定事件
off：删除事件


        //     console.log(e);

        // });
        $('p').on('click' ,function(){

            console.log('aaaa')

        });

off 示例如下：

<body>
    <button id="btn">移除事件</button>
    <p>this is a tesrt</p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $('p').click(function(){console.log('this is a p')});
      $('#btn').click(function(){$('p').off()});
    </script>
</body>

事件委托如下：

      $('ul').on('click','.test',function(){


           console.log('aaa')

       })

on
bind
live
delegate
下面绑定事件的方式，目前 jquery 已经废弃掉了，现在官方推荐就使用 on 来绑定事件。
one：一次性事件

<body>
    <p>this is a test</p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $('p').one('click',function(){console.log('this is a p')});
    </script>
</body>

hover: 等价于移入移出两个事件的集合

      <body>
    <p>this is a test</p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $('p').hover(function(){
          console.log('移入了');
      },function(){
        console.log('移出了');
      });
    </script>
</body>

jquery 动画
在 jquery 中，提供了很多种内置的动画方法：

show
hide
toggle

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background-color: red;
        }
    </style>
</head>

<body>
    <button id="btn">隐藏</button>
    <button id="btn2">显示</button>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $('#btn').click(() => {
            $('div').hide(500);
        })
        $('#btn2').click(() => {
            $('div').show(500);
        })
    </script>
</body>

slideDown
slideUp
slideToggle

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background-color: red;
        }
    </style>
</head>

<body>
    <button id="btn">隐藏</button>
    <button id="btn2">显示</button>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $('#btn').click(() => {
            $('div').slideUp(500);
        })
        $('#btn2').click(() => {
            $('div').slideDown(500);
        })
    </script>
</body>

fadeIn
fadeOut
fadeTo
fadeToggle

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn">隐藏</button>
    <button id="btn2">显示</button>
    <button id="btn3">指定半透明</button>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $('#btn').click(() => {
            $('div').fadeOut(500);
        })
        $('#btn2').click(() => {
            $('div').fadeTo(500,1);
        })
        $('#btn3').click(() => {
            $('div').fadeTo(500,0.5);
        })
    </script>
</body>

animate
stop
delay
finish

在 jquery 中，也是给我们提供了一组 ajax 的方法。

jquery 中的 ajax 方法

ajax
load
get
post
serialize
serializeArray
ajax ：这是 jquery 中提供的 ajax 相关的最核心的方法：

// 当我们引入了 jquery 之后，就有一个最核心的方法，叫做 jquery()
// jquery() 方法有一个简写 $()
// 但是其实引入 jquery 之后，还会有一个 jquery 全局对象，简写就是一个 $

$.ajax({
  url : '请求地址',
  type : '请求类型',
  async : 布尔值,（true 异步，false 同步）
  data : 'name="xiejie"&age=18',
  success : function(){}
})

下面是一个使用 jquery 的 ajax 方法来发送请求的示例：

<body>
    <button id="btn">从服务器获取数据</button>
    <table id="tab"></table>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>

        Mock.mock('/getStu',function(){
            return Mock.mock({
                'list|5' : [{
                    'id|+1' : 1,
                    'name' : '@cname()',
                    'age|18-30' : 1
                }]
            })
        })
  const render = function(arr){
            let tHead = `<tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>`;
            let tBody = arr.map(item=>{
                return `<tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                    </tr>`
            }).join('');
            $('#tab').html(tHead+tBody)
        }

        $('#btn').on('click',function(){
            $.ajax({
                url : '/getStu',
                type : 'GET',
                success : function(data){
                    render(JSON.parse(data).list);
                }
            })
        })
    </script>
</body>

serialize：返回的是字符串的形式
serializeArray：返回的是数组
示例如下：

<body>
    <button id="btn">是否能够提交</button>
    <form action="#" id="myForm">
        <div>
            <label for="stuName">name</label>
            <input type="text" name="stuName" id="stuName">
        </div>
        <div>
            <label for="stuAge">age</label>
            <input type="text" name="stuAge" id="stuAge">
        </div>
        <div>
            <label for="stuScore">stuScore</label>
            <input type="text" name="stuScore" id="stuScore">
        </div>
    </form>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js">
</script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $('#btn').on('click',function(){
            if($('#myForm').serializeArray().every(item=>{
                return item.value != ''
            })){
                alert('OK')
            } else {
                alert('No');
            }
        })
    </script>
</body>

posted on 2020-12-27 15:28 wpwp123 阅读(73) 评论(0) 收藏举报