53 передний конец --jQuery2

каталог

1. Свойства
2. Обработка документов
3. Событие
нагрузка 4. страницы
- Мероприятие 1. window.onload
- 2. событие загрузки JQuery
5. каждый
6. анимация
7. Данные ()
8. Подключите

1. Свойства

атр: идентификатор для собственных пользовательских свойств или атрибутов

.attr({'属性名':'值',...}); // 设置属性
.attr('属性名');       //查看属性
.removeAttr('属性名'); //删除属性

проп: флажок и радио

单选框radio：必须定位到具体的标签
.prop('checked');   // 查看标签是否选中，返回true和false
.prop('checked',true);  // 选中
.prop('checked',false); // 取消选中

多选框checkbox：
    $(":checkbox").prop('checked',true) //全选

Если установлено значение атрибута атр флажком, никоим образом не отмените.

Краткое описание:

　　1. Для этикетки, чтобы увидеть некоторые из атрибутов и пользовательских атрибутов с ATTR

　　2. Для возвращает логическое значение, например, флажок, радио и возможность того, выбран ли или параметр он выбран, и снимите все с опорой.

Истинный и ложный атрибут имеет два свойства, такие как проверенные, выбранные или отключить с помощью подпорки (), другие используют Attr ()

示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div>
    用户名：<input type="text">
</div>
<div>
    密码：<input type="password" name="pwd">
</div>
<div class="d1">
    性别：
    <input type="radio" name="sex" id="s1" value="1">男
    <input type="radio" name="sex" id="s2" value="2">女
</div>
<div>
    爱好：
    <input type="checkbox" name="hobby" value="3">抽烟
    <input type="checkbox" name="hobby" value="4">喝酒
    <input type="checkbox" name="hobby" value="5">蹦迪
</div>
</body>
</html>


操作：
$('#d1').attr({'age1':'18','age2':'19'});   // 添加两个属性
$('#d1').attr('age1'，'18');         // 添加一个属性
$("").prop("checked");
$("#s1").prop("checked");           // 查看 男 是否被选中
$("#s2").prop("checked",true);      // 选择 女

$(":checkbox").prop("checked",true)     // 爱好 全选
$(":checkbox").prop("checked",true)     // 爱好 全取消选中

2. Обработка документов

Добавление к задней внутренней части указанного элемента (сын) из

$(A).append(B)  // 把B追加到A
$(A).appendTo(B)// 把A追加到B

方式一：
var a = document.createElement('a');
$(a).text('百度');
$(a).attr('href','http://www.baidu.com');
$("#d1").append(a);

方式二：
$('#d1').append("<a href=''>百度</a>")
// 添加a标签，能够识别标签

方式三：
// var s = `<a href="">${xxx}</a>`      // 字符串格式化
var s = '<a href="">' + '百度' + '</a>'
$('#d1').append(s)

Добавить указать элементы внутри фронта (сын) из

$(A).prepend(B)     // 把B前置到A
$(A).prependTo(B)   // 把A前置到B

Добавьте указанный элемент к внешнему (Brother) за

$(A).after(B)       // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面

Элемент добавлен к указанному внешнему передней части (Brother) из

$(A).before(B)      // 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

Удалены и опорожняется

remove()    // 删除所有匹配的元素。
empty()     // (清空)删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在

замещать

$(A).replaceWith(B);    //B替换A
$(A).replaceAll(B);     //A替换B

клон

.clone();   // 克隆标签，但没有事件效果
.clone(true);   // 克隆标签，并且克隆事件

Пример Клонирование;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<button class="btn">屠龙宝刀,点击就送!</button>
</body>
<script>
    $(".btn").click(function () {
        // var bEle=$(this).clone();
        var bEle=$(this).clone(true);
        $(this).after(bEle);
    })
</script>
</html>

3. Событие

Связующие события

方式一：
$("#d1").click(function (){
    $(this).css('background-color','green');
})

方式二：
$("#d1").on('click',function (){
    $(this).css('background-color','green');
})

Удалить событие

.off() 方法移除用 .on()绑定的事件处理程序。
　　　$("li").off("click")

Общие события

click(function(){...})  //鼠标左键点击
hover(function(){...})  // 鼠标悬浮
blur(function(){...})   // 失去光标
focus(function(){...})  // 获取到光标
change(function(){...}) //内容发生变化，用于select等
keydown/keyup(function(){...})  //键盘按下/抬起
input       // 实时监听输入值

входное событие , должно быть обязательным, используется для поиска, мониторинга входных значений в реальное время

$('#cc').on('input',function () {
    console.log($(this).val());
})


绑定多个事件 事件名称空格间隔:
$('#xxx').on('input blur',function () {
     console.log($(this).val());
})

MouseEnter событие : мышь входит триггер тег, срабатывает только один раз , чтобы ввести метку к югу не вызывает.

MouseOut событие : мышь покидает триггер тег

событие парения : интеграция два в верхнее событие

Не уроженец этого парения йот, и нет onhover события расслоения плотного, это парить событие JQuery, JQuery является пакетом, нет родного JS

 hover事件 鼠标进进出出的事件
 
$('#d1').hover(
    // 鼠标进入
    function () {
        $(this).css('background-color','green');
    },
    // 鼠标离开
    function () {
        $(this).css('background-color','red');
    });

Наведите курсор мыши на событие : мышь переходит на спусковой крючок, ввести метку к югу вызовет (обратите внимание на mousenter)

KeyDown / KeyUp события: клавиатура нажатие / отпускание

$(window).keydown(function (e) {
    console.log(e.keyCode)
})      //按下键就会输出一个值

$(window).keyup(function (e) {
    console.log(e.keyCode)
})      //抬起键就会输出一个值

пузыриться события

Ребенок и этикетки родительской этикетки (этикетки предки), связанные с тем же событием. Например, нажмите событие, нажмите на метку, она будет срабатывать на один уровень вверх родителя или прародителя события.

Решение: Добавить в подвкладке функции в:

вернуться ложным;

Или: e.stopPropagation ();

$('.c1').click(function () {
alert('父级标签!!!');
});
$('.c2').click(function (e) {
alert('子标签~~~');
// 阻止事件冒泡(阻止事件发生)
return false;           // 方式1
// e.stopPropagation()  // 方式2
})

делегаты событий

Делегаты событий через принцип барботирования событий, используя родительский тег для захвата событий суба ярлыка придут в будущем, чтобы добавить некоторые сублейбл автоматически привязки на событии (суб этикетка является динамической).

# 示例：克隆
$("#d1").on('click','.btn',function () {
    // $(this)是点击的儿子标签
    var a=$(this).clone();
    $("#d1").append(a);
})

// 将儿子.btn 的事件委托给父级#d1，

нагрузка 4. страницы

Мероприятие 1. window.onload

将script放在html的head部分：onload 等待页面内容全部加载完之后自动触发事件,多个onload存在覆盖现象
    window.onload = function(){
        $("").click(function () {       
        });
    }

2. событие загрузки JQuery

Выполнение JQuery страницы после завершения загрузки.

$(document).ready(function(){
// 在这里写JS代码...
})

简写：
$(function () {
    $("").click(function () {       
    });
})

И разница window.onload :

　　Перед вызовом функции 1.window.onload () охватывал явление, мы должны ждать изображения для загрузки после завершения ресурса

　　2.jQuery этого вход явления функция не имеет крышки, после того, как документ завершили загрузку можно вызвать (рекомендуется использовать эту функцию)

示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        window.onload = function () {
            $(".c1").click(function(){
                $(this).addClass("cc")
            })
        };
        // window.onload = function () {
        //     $(".c1").click(function(){
        //         $(this).addClass("c2")
        //     })
        // }
        $(function () {
            $(".c2").click(function(){
                $(this).addClass("cc")
            })
        });
    </script>
    <style>
        .c1{
            width: 200px;
            height:200px;
            background-color:red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .cc{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>

</html>

5. каждый

Общая итеративная функция, которая может быть использована легко и итеративный массив объектов. Массивы и массив подобных объектов, в число итераций, индексированные по длине объекта (например, функция объекта параметра), от 0 до длины - 1. Другие объекты перебирать имена свойств.

$ -----> jQuery.each

# 循环数组： k是索引位置，v是数据
$.each(数组，function (k,v){
    console.log(k,v)
})

# 循环标签：v是Dom标签
    .each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
    
$("li").each(function (k,v) {
    console.log(k,v)                // 取标签
    console.log(k,$(v).text())      // 取标签文本
})



终止each循环：
    return false；
注意：
　　在遍历过程中可以使用 return false提前结束each循环。
　　而直接使用return;后面什么都不加，不写false，就是跳过本次循环。

数组示例：
var a = [1,3,5,7,9];
$.each(a,function (k,v){
    console.log(k,v)
});
/*
0 1
1 3
2 5
3 7
4 9
*/

标签示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>each</title>
</head>
<body>
<div>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</html>

操作：
$("li").each(function (k,v) {
    console.log(k,v)
});     // 查看所有的li标签
$("li").each(function (k,v) {
    console.log(k,$(v).text())
})      // 查看所有的li标签的文本内容

6. анимация

.show(3000)         // 3s后显示标签
.hide(2000)         // 2s后隐藏标签
.toggle(3000)       // 以前什么效果，反着来
.slideDown(2000)    // 向下滑动
.slideUp(2000)      // 向上滑动隐藏
.slideToggle()      

// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])  o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])

// 自定义
animate(p,[s],[e],[fn])

$("div").hide(3000,function () {
    alert("执行完毕");
})      // 执行完动画后，执行回调函数

7. Данные ()

Способ по любому из данных объекта JQuery должен быть сохранен при любом значении, может быть использован вместо глобального переменных
для хранения произвольных данных по всем элементам набора соответствующих элементов или элемента возвращает первый соответствующий элемент в наборе дано имя значение хранимых данных.

　.data (ключ, значение): заданное значение

Описание: хранения произвольных данных в соответствующих элементах.

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data (ключ): значение, если не вернуть неопределенными

　　Описание: Возвращает первый элемент в наборе соответствующих элементов в значении имени хранения данных даются - по .data(name, value)или HTML5 data-*имуществу.

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData (ключ):

　　Описание: Удаляет данные, хранящиеся на элементах, без ключевой параметр указывает на удаление всех сохраненных данных.

$("div").removeData("k");  //移除元素上存放k对应的数据

8. Подключите

jQuery.extend (объект)

　Добавление новых функций в пространстве имен JQuery. Многофункциональный плагин для разработчиков, чтобы добавить новые функции в JQuery в.

Стенография: $ простираться ().

Другие метки не могут быть использованы,

$.extend({
    min:function (a,b) {return a < b ? a : b;},
    max:function (a,b) {return a < v ? a:b;}
})
$.min(2,5)      // 2

$ .Fn.extend () # можно использовать

$.fn.extend({
    min:function (a,b) {return a < b ? a : b;},
    max:function (a,b) {return a < v ? a:b;}
})
$("#d1").max(2,5)       // 5