jQuery

什么是jQuery?

　　1. jQuery是一个JavaScript函数库。

　　2. jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

　　3. jQuery库包含以下功能：HTML 标签选取，操作，事件绑定，CSS 操作，Ajax等一些其它插件

1、jQuery安装

　　官方下载地址：https://jquery.com/

　　两个版本的jQuery：

　　　　Production version - 用于实际的网站中，已被精简和压缩。

　　　　Development version - 用于测试和开发（未压缩，是可读的代码）

　　下载后直接在html文件内导入：

　　　　<head> <script src="jquery-3.3.1.min.js"></script> </head>

　　替代方案：

　　　　直接从引用网络地址：

　　　　　　<head> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head>

　　　　其它版本的引用网址在：https://www.bootcdn.cn/jquery/   

　　中文文档：API接口速查表：http://jquery.cuishifeng.cn/

2、jQuery 对象

　　jQuery对象是通过jQuery包装DOM对象后长生的对象，是自己独有的。

　　示例： $("#test").html()

　　　　1. 获取ID为test元素的html代码，html()是jQuery的方法

　　　　2. 相当于document.getElementById("test").innerHTML,

　　　　3. jQuery无法使用DOM对象的任何方法，DOM也无法使用jQuery对象的方法，

　　　　4. 在声明一个jQuery对象变量的时候在变量名前加上$, var $var = jQuery对象;

// jQuery对象和DOM对象相互转换

// DOM对象 -------> jQuery对象
var divEle = document.getElementById("test");
var $divEle = $(divEle);
// $divEle 就是jQuery对象

//  jQuery对象 ------> DOM对象
var $divEle = $("#test");
var divEle = $divEle[0];
// divEle 就是DOM对象

3、jQuery 语法

　　jQuery的基础语法：$(selector)action()

　　3.1 选择器(selector)

分类
方法
描述
基本选择器
$("#id")，
通过id查找标签
$(".classname")，
通过class属性查找标签
$("tagname")，
通过标签名查找标签
$("*")，
获取所有标签
$("#id, .classname")
组合选择器，一次查找多个标签
层次选择器
$("E F")
E标签的所有后代中F标签
$("E > F")
E标签的所有子代中F标签
$("E + F")
紧挨着E标签的下一个兄弟标签F
$("E ~ F")
E下面的所有兄弟标签F
基本筛选器
$("E:first")
找到E元素的第一个，$(".c1:first")
$("E:last")
找到E元素的最后一个
$("E:eq(index)")
索引等于index的那个元素
$("E:even")
匹配所有索引为偶数的元素，从0开始
$("E:odd")
匹配所有索引为奇数的元素，从1开始
$(":gt(index)")
匹配所有大于给定索引值的元素
$("E:lt(index)")
匹配所有小于给定索引值的元素
$("E:not(元素选择器)")
获取所有不满足条件的标签
$("E:has(元素选择器)"
选取所有后代标签满足条件的标签(从找)
 
// has和not示例：
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
分类
方法
描述
属性选择器
$("E[attr]")
具有某个attr属性的E元素
$("E[attr = value]")
所有attr=vaule的元素（全等于才可以）
$("E[attr != value]")
所有attr不等于value的元素
$("E[attr ~= value]")
attr属性具有多个空格分隔的值，只要其中一个值为value的E元素
$("E[attr ^= value]")
以value字符串开头的(类似于正则)
$("E[attr $= value]")
以 value字符串结尾的(类似于正则)
$("E[attr *= value]")
只要属性值包含 value字符串(类似于正则)
表单筛选器
(只适用于
input)
$("input:text")
文本，可简写成$(":text"), 以下相同
$("input::password")
密文
$("input:file")
文件
$("input:radio")
单选框
$("input:checkbox")
多选框
$("input:submit")
提交
$("input:reset")
重置
$("input:button")
按键
表单对象属性
$("input:enabled")
默认值，可以使用的标签
$("input:disabled")
不可以使用的标签
$("input:checked")
 input的radio和checkbox设置默认选中，
$("input:selected")
select设置默认选择

 

强调：
$(":checked"), 会同时选中selected的option标签
 建议使用$("input:checked")
但是$(":selected")就只能查找到自己的option标签

 

　　3.2 标签操作(action)

　　　　3.2.1 属性操作

// attr和prop的区别：
// 1. attr指的是HTML标签属性，prop指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的
// 示例：
    <input type="checkbox" id="i1" value="1">
// 结果：
    $("#i1").attr("checked")  // undefined
    $("#i1").prop("checked")  // false

// 如果换成以下代码：
    <input type="checkbox" checked id="i1" value="1">
// 结果：
    $("#i1").attr("checked")  // checked
    $("#i1").prop("checked")  // ture

// 对于自定义属性
    <input type="checkbox" checked id="i1" value="1" abc="123">
//结果：
    $("#i1").attr("abc")   // "123"
    $("#i1").prop("abc")  // undefined
// 总结：
//     1. 对于标签内能看到的属性和自定义的属性用attr
//     2. 对于标签固定属性或返回值是Boolean如checkbox,radio等都用prop

　　　　3.2.2 节点操作

// replaceWith的用法
// 语法：$(selector).replaceWith(content或function(index))
// 参数：
// content：必须，规定要插入的内容，可能的值：HTML元素，jQuery对象，DOM对象
// function(index), 可选，规定返回替换内容函数，index-返回集合中元素的index位置
// 示例1：第一个 <p> 元素替换为新的文本
$("p:first").replaceWith("Hello world!");

// 示例2：
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
$("p").replaceWith(function(n){
            return "<h3>段落 " + n + " 的内容是Hello.</h3>";
        });
// 结果：
// 段落 1 的内容是Hello
// 段落 2 的内容是Hello
// 段落 3 的内容是Hello

// replaceAll的用法
// 语法：$(content).replaceAll(selector)
$("<span>Hello world!</span>").replaceAll("p:last");
// 把最后一个<p>元素换成<span>元素

 　　　　3.2.3 样式类操作

　　　　

// addClass和removeClass的语法一样
// 语法：$(selector).addClass(classname,function(index,oldclass))
// 参数：
//     classname ---一个或多个要添加的类名称
//     function(index,currentclass) ---规定返回一个或多个二待添加类名的函数
//         index - 返回集合中元素的 index 位置
//         currentclass - 返回被选元素的当前类名
//示例1：
.intro{
    font-size:30px;
    color:blue;
}
.note{
    background-color:yellow;
}
$("p:first").addClass("intro note");

// 示例2：
.par_0{
    color:blue;
}
.par_1{
    color:red;
}
$("p").addClass(function(n){
            return "par_" + n;
        });


// toggleClass
// 语法：$(selector).toggleClass(classname,function(index,currentclass),switch)
// 参数：
//     classname ---添加或移除的一个或多个类名。多个类名用空格隔开
//     function(index,currentclass) ---规定返回需要添加/删除的一个或多个类名的函数
//         index - 返回集合中元素的 index 位置
//         currentclass - 返回被选元素的当前类名
//     switch ---可选。布尔值，规定是否仅仅添加（true）或移除（false）类名
// 示例1：
.listitem_1, .listitem_3{
    color:red;
}
.listitem_0, .listitem_2{
    color:blue;
}
$("li").toggleClass(function(n){
            return "listitem_" + n;
        });

// 示例2：
$("p").toggleClass("main",true);    // 只添加类名main
$("p").toggleClass("main",false);    // 只删除类名main

　　　　3.2.4 CSS 属性操作

　　　　　　 css() 方法作用：为被选元素设置或返回一个或多个样式属性

　　　　　　特点：

　　　　　　　　1. 返回第一个匹配元素的指定CSS属性值

　　　　　　　　2. 简写的 CSS 属性（比如 "background" 和 "border"）不被完全支持

// 语法：
// 返回CSS属性值：
//     $(selector).css(property)
// 设置CSS属性值：
//     $(selector).css(property,value)
// 使用函数设置CSS属性的值
//     $(selector).css(property,function(index,currentvalue))
// 设置多个属性值
//     $(selector).css({属性：value, 属性：value, ...})
// 参数：
//     property --- CSS 属性名称
//     value ---  CSS 属性的值
//     function(index,currentvalue) --- 返回 CSS 属性新值的函数
//         index - 返回集合中元素的 index 位置
//         currentvalue - 返回 CSS 属性的当前值
// 示例1：使用函数设置指定CSS属性值
$("p").css("border-width",function(i){
            return i + 25;
        });

// 示例2：设置多个CSS属性值
$("p").css({
            "color":"white",
            "background-color":"#98bf21",
            "font-family":"Arial",
            "font-size":"20px",
            "padding":"5px"
        });

　　　　3.2.5 位置操作

// offset 用法
// 语法：
// 返回偏移坐标值
//     $(selector).offset()
// 设置偏移坐标
//     $(selector).offset({top:value,left:value})
// 使用函数设置偏移坐标：
//     $(selector).offset(function(index,currentoffset))
// 参数：
//     {top:value,left:value} ---单位像素px，
//         可能的值：{top: 100, left: 100}, 或对象
//     function(index,currentoffset) ---规定返回包含 top 和 left 坐标的对象的函数
//         index - 返回集合中元素的 index 位置。
//         vcurrentoffset - 返回被选元素的当前坐标
// 示例1：使用对象设置偏移量
    newPos=new Object();
    newPos.left="0";
    newPos.top="100";
    $("p").offset(newPos);

// 示例2：使用函数设置偏移量
    $("p").offset(function(n,c){
        newPos=new Object();
        newPos.left=c.left+100;
        newPos.top=c.top+100;
        return newPos;
    });

// position 用法
// 说明：
//     1. 如果父标签没有"position: relative",会一直往上找，直到相对窗口位置
//      2. 位置的计算：自身标签的margin与border的边界到父标签border与padding的边界的距离
// 示例：
<div style="position: relative;border:1px solid black;padding:100px;margin:50px;">
<p style="border: 10px solid black;">段落。。。。</p>
</div>
var $pos = $("p").postion();
console.log($pos.left);
console.log($pos.right);

// 结果是 100  100

// scrollTop 用法
// 当滚动条位于最顶部时，位置是 0
// 返回位置时，返回第一个匹配元素的滚动条的垂直位置
//     语法：$(selector).scrollTop()
// 设置位置时，设置所有匹配元素的滚动条的垂直位置
//     语法：$(selector).scrollTop(position)
$(window).scrollTop(300), 设置整个文档距顶部300px

　　　　3.2.6 其它操作


4、事件

　　jQuery可以使用DOM定义的事件，也有自己独有的事件如hover，

　　绑定事件

　　　　1. 直接使用$("E").事件(function(){..}); 可以绑定DOM事件和jQuery事件

　　　　2. 使用方法.on来绑定事件，不能用来绑定jQuery事件，若同时绑定多个事件可用逗号隔开

　　　　3. 可以使用方法off来解除绑定事件，用法和on一样

// hover 事件
// 当光标移动到元素上时，触发第一个函数，移开触发第二个函数
$("#p1").hover(
    function(){
        $(this).css("color", "red");
    },
    function(){
        $(this).css("color", "green");
    }
);

// mouseup 事件
  $("#p1").on("mouseup",function(){
    $(this).css("color", "red");
  });

　　阻止事件


5、页面加载

　　1. $(document).ready(function(){}), 页面加载后执行该函数，和window.onload=function(){}效果一样

　　2. 可简写成$(function(){});

6、事件委托

　　on() 方法在被选元素及子元素上添加一个或多个事件处理程序

　　语法：$(selector).on(event,childSelector,data,function)

 

　　参数：

　　　　event ---必需，事件名

　　　　childSelector --- 可选。规定是被选元素的子元素

　　　　data --- 可选。规定传递到函数的额外数据

　　　　function --- 可选。规定当事件发生时运行的函数

// 示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).remove();
  });
  $("button").click(function(){
    var newStr = "<p>段落"+($("p").length+1)+"</p>"
    $(newStr).insertAfter("p:last");
  });
});
</script>
</head>
<body>

<div style="background-color:skyblue">
<button>插入段落</button>
<p>段落1</p>
<p>段落2</p>
</div>

</body>
</html>

7、动画效果



8、each()

 　　描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组，也可以用来迭代jQuery对象

// 使用1：
li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

// 使用2：
$.each($("li"), function(){
  $(this).addClass("c1");
});

// 使用3：效果和上述一样
$("li").each(function(){
  $(this).addClass("c1");
});

//在遍历过程中如果遇到return false;就会结束所有循环

9、data

　　描述：在匹配的元素集合中的所有元素上存储任意相关数据或

　　　　    返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

// .data(key, value) ---在匹配的元素上存储任意相关数据。
    $("div").data("k",100);//给所有div标签都保存一个名为k，值为100

// .data(key) ---返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
    $("div").data("k");//返回第一个div标签中保存的"k"的值

// .removeData(key) ---移除存放在元素上的数据，不加key参数表示移除所有保存的数据
    $("div").removeData("k");  //移除元素上存放k对应的数据

10、jQuery 插件机制

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
$.min(2,3);// => 2
$.max(4,5);// => 5
</script>

 

posted @ 2019-04-14 01:03  yw_sun  阅读(227)  评论(0)    收藏  举报