[JavaScript知识库]jQuery

下载

• 版本介绍

1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本

• 各个版本的下载
  https://code.jquery.com/

入口函数

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

• 相当于原生 js 中的 DOMContentLoaded。
• 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
• 更推荐使用第一种方式。

对象转换

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM:
var domObject1 = $('div')[0]

选择器

• 兄弟

• 父、子、兄

样式操作

• css

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

• 操作 类

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

元素消现

• 显示隐藏：show() / hide() / toggle() ;
• 划入画出：slideDown() / slideUp() / slideToggle() ;
• 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
• ? 停止动画排队的方法为：stop() ;

属性操作

• 固有属性 prop()

// get
prop("url")
// set
prop("url", "baidu.com")

• 自定义属性 attr()

元素间本文操作

• html()

对应JS中的 innerHTML

• text()

对应JS中的 innerText

• val()

对应JS中的 value 属性, 主要针对元素的内容还有表单的值操作

元素操作

• 创建

// 动态的创建一个div标签
$("<div>123123</div>")

• 内部 添加(父子)

// 内容放到 内部的最后面
element.append("内容")

// 内容放到 内部的最前面
element.prepend("内容")

• 外部 添加(平辈)

// 内容放到 身后
element.after("内容")

// 内容放到 身前
element.before("内容")

• 删除

// 删除自己
element.remove()

// 清空自己的子辈
element.empty()

• 遍历

$("ul>li").each(function(index, domEle) {
    // index 是 索引
    // domEle 是 原生 的 DOM元素
})

尺寸、位置

• 尺寸

// 1. width() / height() 获取设置元素 width和height大小 
console.log($("div").width());
// $("div").width(300);

// 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
console.log($("div").innerWidth());

// 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
console.log($("div").outerWidth());

// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));

• 位置

// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
//     top: 200,
//     left: 200
// });
      
// 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
//     top: 200,
//     left: 200
// });
      
// 3. 被卷去的头部
$(document).scrollTop(100);
// 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
    // console.log(11);
    console.log($(document).scrollTop());
    if ($(document).scrollTop() >= boxTop) {
        $(".back").fadeIn();
    } else {
        $(".back").fadeOut();
    }
});

事件

注册

// way1
$("div").click(function() {
    $(this).css("background", "purple");
});

// way2
// (1) on可以绑定1个或者 多个 事件处理程序
$("div").on({
    mouseenter: function() {
        $(this).css("background", "skyblue");
    },
    click: function() {
        $(this).css("background", "purple");
    }
});

$("div").on("mouseenter mouseleave", function() {

    $(this).toggleClass("current");

});
  
// (2) on可以实现  事件委托  （委派）
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
    alert(11);
});

// (3) on可以给未来  动态创建的元素  绑定事件
$("ol").on("click", "li", function() {
    alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

解绑

// 事件绑定
$("div").on({
    click: function() {
        console.log("我点击了");
    },
    mouseover: function() {
        console.log('我鼠标经过了');
    }
});
$("ul").on("click", "li", function() {
    alert(11);
});
  
// 1. 事件解绑 off 
$("div").off();  // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li"); // 接触事件委派

// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
    alert(11);
})

触发

// 绑定事件
$("div").on("click", function() {
  alert(11);
});

// 自动触发事件
// 1. 元素.事件()
$("div").click(); //会触发元素的默认行为
      
// 2. 元素.trigger("事件")
$("div").trigger("click"); //会触发元素的默认行为
      
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
  $(this).val("你好吗");
});


// 解释 默认行为
// 第一个会获取焦点，第二个不会
$("input").trigger("click");
$("input").triggerHandler("click");

ajax

let jsonString = JSON.stringify({name:"123"})

$.ajax({
url:'http://localhost:8086', //ajax请求服务器的url
type:'post',
contentType:'application/json; charset=UTF-8', //设置请求编码格式
data:jsonString, //传递请求参数
async:false,
dataType:'json', //设置期待返回普通的文本字符串
success:function (data,mess) { //如果请求成功，服务器成功返回，则执行此函数
    console.log("执行success回调函数");
    console.log(typeof data)
    console.log(data)
    console.log(mess)
},
cache:false,
// async:true,
error:function (err) { //请求中出现错误回调此函数
    console.log("请求中出现错误回调此函数");
}
})

引入其他页面

用途

• iframe： 浮动框架

会创建包含 另外一个文档（任何类型的文档，不仅仅是html，但主要用于html）的内联框架（即行内框架）,他是一个行内元素。

用法

• 不兼容提示

<iframe>你的浏览器不支持该标签，请使用谷歌浏览器</iframe>