jquery input 赋值_jQuery设计模式

什么是 jQuery

参考：阮一峰-jQuery设计思想、jquery.com、jQuery API 中文文档

官方简介：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库，它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

简单来说就是使用 jQuery能更加便捷的DOM。

最新版 jQuery 引入链接

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

作为工具库历史悠久

从2006年8月26日首发至今，仍然被大多数的网站使用，在互联网的行业里简直算是”稳如泰山“。对新人来说，该库是极其友好上手，而且其中有不少的设计风格值得我们去参考，包括：改变结果集、链式风格、命名风格等。

jQuery 使用情况

快速选择元素

jQuery选择器-62 个

标准格式$('selector') selector与 css 的选择器使用一致，如：

$('#myId') //ID 选择器
$('div.className')  //选择 class 为 className 的 div
$('className') //选择 class 为 className 的元素
$('input[name=frist]') //选择 name 属性等于 frist 的 input 元素

jQuery特有的表达式

$('div:first h2')//选择第一个 div 子元素 h2 的元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个

---

过滤器

Filtering-11 个

$('div').eq(5); //选择第6个div元素，可以接受负数
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.class #id'); //不匹配 class | id 的div元素
$('div').filter('.myClass'); //匹配myClass的div元素
$('div').first(); //选择第1个div元素

其中$('div').is('p')：判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素

---

链式操作

jQuery其中最重要设计思想之一，是选中网页元素后返回一个jQuery对象，从而不断链接操作。

$("ul").find('.hi').text("hi,Aziz!").css('border','1px solid red')

原理：每一次调用jQuery返回的都是jQuery对象，所以不同操作可以连在一起。

jQuery = function (selector) {
    let elements = document.querySelectorAll(selector)
    return {
        get(index) {
            return elements[index]
        },
        addClass(className) {
            for (let i = 0; i < elements.length; i++) {
                elements[i].classList.add(className)
            }
            return this;
        },
    }
$('div').addClass('red').addClass('border').xxx

同时 jQuery 还提供.end()方法是结果后退一步

$('.test')
    .find('.child') //找到子元素
    .addClass('red')
    .end()  //后退一步
    .addClass('blue');

---

操作元素

适配器模式

使用同一个函数，根据判断完成取值和赋值操作

$('#test').html();
$('#test').html('<p>hi</p>')

原理：通过对参数length的判断，来匹配不同的函数操作

window.jQuery = {
    text(node, string) {
        if (arguments.length === 2) {
            if ('innerText' in node) {
                node.innerHTML = string
            } else {
                node.textContent = string
            }
        } else if (arguments.length === 1) {
            if ('innerText' in node) {
                return node.innerText
            } else {
                return node.textContent
            }
        }
    },
    html(node, string) {
        if (arguments.length === 2) {
            node.innerHTML = string
        } else if (arguments.length === 1) {
            return node.innerHTML
        }
    }
}

常见的元素取值和赋值

.html()     //取出或设置html内容，可设置<p>hi</p>等HTML 元素
.text()     //取出或设置text内容
.attr()     //取出或设置某个属性的值
.width()    //取出或设置某个元素的宽度
.height()   //取出或设置某个元素的高度
.val()      //取出某个表单元素的值

---

复制 | 删除 | 创建

.clone()可以复制一个元素

const copy = $('#test').clone();
$('body').append(copy);

有两种删除方法：.remove()和.detach()

两者区别：remove不保留被删除元素的事件，detach则保留元素事件，利于重新插入文档时使用。

$('#test').remove();  //删除ID为test的元素
$('#test').detach()

创建元素和DOM操作比较类似。

$('<p>Hello</p>').appendTo($('#test'));   //将前者元素创建到 test 里面
$('ul').append('<li>list item</li>');

---

使用工具方法

共有37 个方法，参考文档

与元素无关的工具方法，与原生的一些对象方法相似

$.trim()    //去除字符串两端的空格。
$.each()    //遍历一个数组或对象。
$.inArray()     //返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
$.grep()    //返回数组中符合某种标准的元素。
$.extend()  //将多个对象，合并到第一个对象。
$.makeArray()   //将对象转化为数组。
$.type()    //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
$.isArray()     //判断某个参数是否为数组。
$.isEmptyObject()   //判断某个对象是否为空（不含有任何属性）。
$.isFunction()  //判断某个参数是否为函数。
$.isPlainObject()   //判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support()     //判断浏览器是否支持某个特性。

添加参数直接调用

console.log($.type($('#test')))

---

事件操作

参考：evens 共61个事件接口

事件监听

$('p').click(function(){  //点击事件
　　alert('Hello');
});

常用的方法

.blur()     // 表单元素失去焦点。
.change()   // 表单元素的值发生变化
.click()    // 鼠标单击
.dblclick()     // 鼠标双击
.focus()    // 表单元素获得焦点
.focusin()  // 子元素获得焦点
.focusout()     // 子元素失去焦点
.hover()    // 同时为mouseenter和mouseleave事件指定处理函数
.keydown()  // 按下键盘（长时间按键，只返回一个事件）
.keypress()     // 按下键盘（长时间按键，将返回多个事件）
.keyup()    // 松开键盘
.load()     // 元素加载完毕
.mousedown()    // 按下鼠标
.mouseenter()   // 鼠标进入（进入子元素不触发）
.mouseleave()   // 鼠标离开（离开子元素不触发）
.mousemove()    // 鼠标在元素内部移动
.mouseout()     // 鼠标离开（离开子元素也触发）
.mouseover()    // 鼠标进入（进入子元素也触发）
.mouseup()  // 松开鼠标
.ready()    // DOM加载完成
.resize()   // 浏览器窗口的大小发生改变
.scroll()   // 滚动条的位置发生变化
.select()   // 用户选中文本框中的内容
.submit()   // 用户递交表单
.toggle()   // 根据鼠标点击的次数，依次运行多个函数
.unload()   // 用户离开页面

绑定多个事件

一个元素需要绑定多个事件，需要运用.bind()灵活调用事件

$('input').bind(
　　'click change', //同时绑定click和change事件
　　    function() {
　　    　　alert('Hello');
　　    });

执行一次的方法

只想运行一次，可以使用.one()

$("p").one("click", function() {
　　alert("Hello");    //点击运行一次，以后的点击不会运行
});

解绑事件

.unbind()用来解除事件绑定。

$('p').unbind('click');

可利用解绑事件来执行一次事件

$('input').bind(
　'change keydown',
　function() {
        $('<p>Hello</p>').appendTo($('#test'));
        $('input').unbind('change keydown');
});

页面效果

自带效果

.fadeIn()       //淡入
.fadeOut()      //淡出
.fadeTo()       //调整透明度
.hide()         //隐藏元素
.show()         //显示元素
.slideDown()        //向下展开
.slideUp()      //向上卷起
.slideToggle()      //依次展开或卷起某个元素
.toggle()       //依次展示或隐藏某个元素

除了.show()和.hide()所有其他特效的默认执行时间都是400ms（毫秒），也可以通过参数更改

$('h1').fadeIn(300); // 300毫秒内淡入
$('h1').fadeOut('slow'); // 缓慢地淡出

特效结束后执行函数

$('p').fadeOut(300, function() { $(this).remove(); });

自定义特效

$('div').animate(
　　　　{
　　　　　　left : "+=50", //不断右移
　　　　　　opacity : 0.25 //指定透明度
　　　　},300, // 持续时间
　　　　function() { alert('done!'); } //回调函数
　　);

停止动效

.stop()和.delay()用来停止或延缓特效的执行。

$.fx.off如果设置为true，则关闭所有网页特效。

---

end.

原文：https://www.yuque.com/docs/share/c1564c42-e4ab-47f9-9958-f4f2c41b199f?# 《jQuery设计模式》