jQuery简易教程

jQuery

jQuery基础

1.简介

jQuery是一个JavaScript框架.能够简化JS开发

封装了js的原生代码,本质上还是js文件.

2.快速入门

jQuery版本选择

目前jQuery有三个大版本：
    1.x：兼容ie678,使用最为广泛的，官方只做BUG维护,功能不再新增。因此一般项目来说，使用1.x版本就可以了，
    2.x：不兼容ie678，很少有人使用，官方只做BUG维护,功能不再新增.如果不考虑兼容低版本的浏览器可以使用2.x,
    3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求, 一般不使用3.x版本的,很多老的jQuery插件不支持这个版本。
    目前该版本是官方主要更新维护的版本
jquery-xxx.js 与 jquery-xxx.min.js区别：
    1. jquery-xxx.js:开发版本.给程序员看的,有良好的缩进和注释.体积大一些
    2. jquery-xxx.min.js:生产版本.程序中使用,没有缩进.体积小,加载快
//简单jQuery代码
<body>
<div id="div1">12312332</div>
<div id="div2">45645644</div>
<script>
    let div1=$("#div1");
    let div2=$("#div2");
    alert(div1.html());
    alert(div2.html());
</script>
</body>

3.jQuery对象和JS对象区别与转换

<script>
    let div1=document.getElementById("div");
    for (let i = 0; i < div1.length; i++) {//js方法修改div1和div2
        div1[i].innerHTML="bbb"; }
    let div2=$("div");
    div2.html("bbb")//jq方法修改div标签
    /*
        1.jq方法更加方便和强大
        2.jq对象和js对象方法不通用
            div2.innerHTML="ccc";//错误
        3.两者互相转化
            1.js-->jq//js转为jq强化功能$(js对象)
               $(div1).html("eee");
            2.jq-->js     //jq对象[索引]或者jq对象.get(索引)
                div2.get(1).innerHTML="hhh";
     */
</script>

4. 选择器: 选择元素(标签)

4.1基本操作

1.事件绑定
1.事件绑定
    获取Check按钮
    $("#check").click(function () {
        alert("Log in Success");
    });
//实例代码
<button id="check">确认</button>
<script>
    $("#check").click(function () {
        alert("Log in Success");
    });
</script>
//代码结束
2.入口函数
若将上述js代码放到head栏,代码会失效.因而需要入口函数$(function () {});
//入口函数示例
$(function () {
    $("#check").click(function () {
        alert("Log in Success");
    });
});
//示例结束
window.onload  和 $(function) 区别
window.onload 只能定义一次,若定义多次,后边的会将前边的覆盖
$(function)可以定义多次的
//浏览器只会显示bbb
window.onload=function () {alert("aaa")};
window.onload=function () {alert("bbb")}
//浏览器会显示aaa和bbb
$(function () {alert("aaa");});
$(function () {alert("bbb");});
3.样式控制
$("#div1").css("backgroundColor","pink");

4.2 分类

基本选择器
1. 标签选择器（元素选择器）
    语法： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器
    语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
     语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器：
    语法:$("选择器1,选择器2....") 获取多个选择器选中的元素
//基本选择器实例
<script type="text/javascript">
    $(function (){
        //点击id为b1的按钮,改变id为one的元素背景色为红色
        $("#b1").click(function () {
            $("#one").css("backgroundColor","red");});
        //点击id为b2的按钮,改变所有元素名为 <div> 的元素背景色为红色
        $("#b2").click(function () {
            $("div").css("backgroundColor","red");});
        //点击id为b3的按钮,改变 class 为 mini 的所有元素背景色为红色
        $("#b3").click(function () {
            $(".mini").css("backgroundColor","red");});
        //点击id为b4的按钮, 改变所有<span>元素和 id 为 two 的元素背景色为红色
        $("#b4").click(function () {
            $("span,#two").css("backgroundColor","red");});
    });
</script>
层级选择器
1. 后代选择器
    语法： $("A B ") 选择A元素内部的所有B元素
2. 子选择器
    语法： $("A > B") 选择A元素内部的所有B儿子元素,不会选择孙子
//层级选择器实例
<script type="text/javascript">
$(function () {
    $("#b1").click(function () {
        $("body div").css("backgroundColor","red");
    });
    $("#b2").click(function () {
        $("body>div").css("backgroundColor","red");
    });
})
</script>

属性选择器
1. 属性名称选择器
    语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
    语法:$("A[属性名='值']") 包含指定属性等于指定值的选择器
3. 复合属性选择器
    语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器
//属性选择器实例
<script type="text/javascript">
    $(function () {
        //含有属性title的div元素背景色为红色
        $("#b1").click(function () {
            $("div[title]").css("backgroundColor","red");
        });
        //属性title值等于test的div元素背景色为红色
        $("#b2").click(function () {
            $("div[title='test']").css("backgroundColor","red");
        });
        //属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色
        $("#b3").click(function () {
            $("div[title!='test']").css("backgroundColor","red");
         });
        //属性title值 以te开始 的div元素背景色为红色
        $("#b4").click(function () {
            $("div[title^='te']").css("backgroundColor","red");
        });
        //属性title值 以est结束 的div元素背景色为红色
        $("#b5").click(function () {
            $("div[title$='est']").css("backgroundColor","red");
        });
        //属性title值 含有es的div元素背景色为红色
        $("#b6").click(function () {
            $("div[title*=es]").css("backgroundColor","red");
        });
        //选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色
        $("#b7").click(function () {
            $("div[title][title*='es']").css("backgroundColor","red");
        });
    })
</script>
过滤选择器
1. 首元素选择器
    语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
    语法： :last 获得选择的元素中的最后一个元素
3. 非元素选择器
    语法： :not(selector) 不包括指定内容的元素
4. 偶数选择器
    语法： :even 偶数，从 0 开始计数
5. 奇数选择器
    语法： :odd 奇数，从 0 开始计数
6. 等于索引选择器
    语法： :eq(index) 指定索引元素
7. 大于索引选择器
    语法： :gt(index) 大于指定索引元素
8. 小于索引选择器
    语法： :lt(index) 小于指定索引元素
9. 标题选择器
    语法： :header 获得标题（h1~h6）元素，固定写法
//过滤选择器示例
//改变第一个div元素的背景色为红色
$("#b1").click(function(){
    $("div:first").css("backgroundColor","red");
});
//改变class不为one的所有div元素的背景色为红
$("#b2").click(function(){
    $("div:not(.one)").css("backgroundColor","red");
});
//改变所有的标题元素的背景色为红色
$("#b4").click(function(){
    $(":header").css("backgroundColor","red");
})
表单过滤选择器
1. 可用元素选择器
    语法:     :enabled 获得可用元素
2. 不可用元素选择器
    语法:     :disabled 获得不可用元素
3. 选中选择器
    语法:     :checked 获得单选/复选框选中的元素
4. 选中选择器
    语法:     :selected 获得下拉框选中的元素
//表单过滤实例代码
//利用jQuery对象的val()方法改变表单内可用<input>元素的值
$("#b1").click(function () {
        $("input[type='text']:enabled").val("aaa");
});
/*
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理*/
//利用jQuery对象的length属性获取复选框选中的个数
$("#b3").click(function () {
        alert($("input[type='checkbox']:checked").length);
});
/*
<select name="job" id="job" multiple="multiple" size=4>
<option>程序员</option>
<option>中级程序员</option>
<option>高级程序员</option>
<option>系统分析师</option>
</select>
*/
//利用jQuery对象的length属性获取下拉框选中的个数
$("#b4").click(function () {
    alert($("#job>option:selected").length);
});
//注意选择的是id为job的表单下的option数目!!!#job>option

5. DOM操作

5.1 内容操作

        1. html():
        //获取/设置元素的标签体内容
        //<a><font>内容</font></a>  --> <font>内容</font>
        2. text():
        //获取/设置元素的标签体纯文本内容
        //<a><font>内容</font></a> --> 内容
        3. val()：
        //获取/设置元素的value属性值
//内容操作实例代码
<script>
    $(function () {
        // 获取myinput 的value值
        alert($("#myinput").val());
        // 获取mydiv的标签体内容
        alert($("#mydiv").html());
        // 获取mydiv文本内容
        alert($("#mydiv").text());
});
</script>
<body>
<input id="myinput" type="text" name="username" value="张三" />
<div id="mydiv">
    <p><a href="#">标题标签</a></p>
</div>
</body>
//输出结果
张三
<p><a href="#">标题标签</a></p>
标题标签

5.2 属性操作

1. 通用属性操作
    1. attr(): 获取/设置元素的属性
    2. removeAttr():删除属性
    3. prop():获取/设置元素的属性
    4. removeProp():删除属性
        attr和prop区别？
        1. 元素的固有属性，则建议使用prop
        2. 元素自定义的属性，则建议使用attr
        attr无法选中input的checked属性和select的option属性
2. 对class属性操作
    1. addClass():添加class属性值
    2. removeClass():删除class属性值
    3. toggleClass():切换class属性
        * toggleClass("one"):
        判断如果元素对象上存在class="one",则将属性值one删除掉.如果元素对象上不存在class="one",则添加
    4. css():
//通用属性操作实例
$(function () {
    //获取北京节点的name属性值
    $("#bj").attr('name');
    //设置北京节点的name属性的值为dabeijing
    $("#bj").attr('name', 'dabeijing');
    //新增北京节点的discription属性 属性值是didu
    $("#bj").attr('discription', 'didu');
    //删除北京节点的name属性并检验name属性是否存在
    $("#bj").removeAttr('name');
    //获得hobby的的选中状态
    $("#hobby").prop('checked');
})
//对class属性操作
$(function () {
    //采用属性增加样式(改变id=one的样式)
    $("#b1").click(function () {
        $("#one").attr("class","second");
    });
    //采用AddClass增加样式(改变id=one的样式)
    $("#b2").click(function () {
        $("#one").addClass("second");
    });
    //切换样式
    $("#b3").click(function () {
        $("#one").toggleClass("second");
    });
    //通过css()设置id为one背景颜色为绿色
    $("#b4").click(function () {
        $("#one").css("backgroundColor","green");
    });
})

5.3 CRUD操作

1. append():父元素将子元素追加到末尾
* 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2. prepend():父元素将子元素追加到开头
* 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3. appendTo():
* 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
4. prependTo()：
* 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
5. after():添加元素到元素后边
* 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
6. before():添加元素到元素前边
* 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. insertAfter()
* 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
8. insertBefore()
* 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
9. remove():移除元素
* 对象.remove():将对象删除掉
10. empty():清空元素的所有后代元素。
* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

6. 动画

三种方式显示和隐藏元素

6.1 默认显示和隐藏方式

1. show([speed],[easing],[fn])
    参数：
        1.speed:动画的速度.三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)
        2.easing用来指定切换效果,默认是"swing",可用参数"linear"
            swing：动画执行时效果是先慢,中间快,最后又慢
            linear：动画执行时速度是匀速的
        3.fn：在动画完成时执行的函数,每个元素执行一次。
2. hide([speed],[easing],[fn])
3. toggle([speed],[easing],[fn])
//示例
functiontoggleFn(){
$("#showDiv").toggle("slow")}
functionshowFn(){
$("#showDiv").show("slow")}
functionhideFn(){
$("#showDiv").hide("slow")}

6.2 滑动显示和隐藏方式

1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])

6.3 淡入淡出显示和隐藏方式

1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])

7.遍历

each

jquery对象.each(function(index,element){});
     index:就是元素在集合中的索引
     element：就是集合中的每一个元素对象
    this：集合中的每一个元素对象
回调函数返回值：
    true:如果当前function返回为false，则结束循环(break)。
    false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
//实例
<scripttype="text/javascript">
    $(function(){
    varcities=$("#cityli");
    cities.each(function(index,element){
    if("上海"===element.innerHTML)
        return true;        //跳过上海打印天津等
    alert(index+""+element.innerHTML);
    })
})
</script>
<body>
    <ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>

$.each&&for..of

1. $.each(object, [callback])
以上面实例代码为例
$.each(cities,function(index,element){
    if("上海"===element.innerHTML)
        return true;        //跳过上海打印天津等
    alert(index+""+element.innerHTML);
})
2. for..of       jquery 3.0 版本之后提供的方式
        for(元素对象 of 容器对象)
        for(li of cities){
            alert($(li).html());
        }

8. 事件绑定

jquery标准的绑定方式

jq对象.事件方法(回调函数)；
注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为.
表单对象.submit();//让表单提交

#### on绑定事件/off解除绑定

jq对象.on("事件名称",回调函数)
jq对象.off("事件名称")
如果off方法不传递任何参数，则将组件上的所有事件全部解绑
//示例代码
$(function () {
    $("#btn").on("click", function () {
        alert("被点击了")
    })
});
$(function () {
    $("#btn2").click(function () {
        $("#btn").off("click");
    })
})

事件切换：toggle

jq对象.toggle(fn1,fn2...)
当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
//1.9版本后已删除,使用需要导入jQuery Migrate插件
$(function(){
    $("#btn").toggle(function(){
        $("#mydiv").css("backgroundColor","green");
    },function(){
        $("#mydiv").css("backgroundColor","red");
    })
})

实例

图片自动淡入淡出

需求
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。
分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)
3. 使用  show/hide方法来完成广告的显示
<script>
$(function(){
    setTimeout(show,3000);
    setTimeout(hide,8000);
});
functionshow(){
    $("#ad").show("slow");
}
functionhide(){
    $("#ad").hide("slow");
}
</script>
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg"/>
</div>

插件: 增强JQuery的功能

1. 实现方式：
    1  $.fn.extend(object)
        增强通过Jquery获取的对象的功能  $("#id")
    2  $.extend(object)
        增强JQeury对象自身的功能  $/jQuery
$.fn.extend({           //增强对象功能
    check:function(){
        this.prop("checked",true);
    },
    uncheck:function(){
        this.prop("checked",false);
    }
});
$(function(){
    $("#btn-check").click(function(){
        $("input[type='checkbox']").check();
    });
    $("#btn-uncheck").click(function(){
        $("input[type='checkbox']").uncheck();
    });
})
$.extend({      //增强jQuery自身功能
    max:function(a,b){
        returna>b?a:b;
    },
    min:function(a,b){
        returna<b?a:b;
    }
});
$(function(){
    alert($.max(2,3));
    alert($.min(2,3));
})

原文地址：https://www.cnblogs.com/INnoVationv2/p/12483959.html

时间： 2024-10-14 06:46:19

jQuery简易教程的相关文章

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

BIND简易教程（1）：安装及基本配置

首先,为什么说是简易教程呢?因为BIND的功能实在太多,全写出来的话要连载好久,我觉得我没有那么多精力去写:而我了解的仅仅是有限的一点点,不敢造次.百度上的文章也是一抓一大把呐!所以,教点基本使用方法,有需求的同学可以再翻翻BIND管理员手册.那么,还是直接开始说正题吧.本次还是像PowerDNS一样是一个连载,写三篇. 目录:BIND简易教程(1):安装及基本配置(本篇)BIND简易教程(2):BIND视图配置(待续)BIND简易教程(3):DNSSec配置(待续) 首先说说安装.安装是非常简

Emacs简易教程

Emacs简易教程阅读: 命令: $emacs 进入之后,输入: C-h t 这里,C-h表示按住[Ctrl]键的同时按h ####### 20090620 *退出: 输入“C-x C-c” *撤销: 输入"C-x u" 或输入"C-_" 这里,"C-_"比较好输入一些(好像C--也行),但是有的键盘上面没有"_"就只能输入“C-x u”了,撤销动作能进行20次. *向上翻页: 输入"M-v" 这里,右手的

CCS2.2基于软件仿真简易教程(汇编)

CCS2.2基于软件仿真简易教程(汇编) Rev 1.0 Writer Nirvana Silence 配置目标芯片 打开此图标 导入配置,生成gel文件,导入点击close 然后关闭 保存changes 启动工程软件 新建工程.asm文件,添加到工程 新建文件 保存为汇编格式 添加到工程 编写程序,编译程序,load程序 在新建的ASM文件中输入以下程序,查看运行后(1030H).(1040H).*AR3,AR4的值 记得助记符前面至少要有一个空格 编译 没有问题,load .out文件 打开

JQuery强化教程 —— jQuery Easing

从jQuery API 文档中可以知道,jQuery自定义动画的函数. animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串 ("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

getopts简易教程(Small getopts tutorial)译文(未完成)

getopts简易教程 当你想用一种专业的方式解析命令行参数时,getopts就是要选择的工具.和它的旧版本兄弟命令getopt不同(注意没有s!),getopts是shell内置命令.高级地方表现在 你不需要通过一个外部命令传递参数 getopts可以很容易的设置一些你能用于解析参数的变量(对于一个外部程序来说这是不可能的!) 你不必再处理过去一些使用getopt时的一些bug实现(空格, -) getopts已经在POSIX?定义 一些其他解析位置参数的其他方法(不用getopt(s))在这

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

jQuery 入门教程(二): 基本语法

学习jQuery之前需要你有下面几个方面的基本知识 HTML CSS JavaScript jQuery 的基本语法 $(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样. action() 定义操作该HTML元素的方法. 比如: $(this).hide() – 隐藏当前元素. $("p").hide() – 隐藏所以 <p> 元素. $(".te

Android实战简易教程-第四十枪（窃听风云之短信监听）

近期在做监听验证码短信自己主动填入的功能,无意间想到了一个短信监听的办法. 免责声明:短信监听本身是一种违法行为,这里仅仅是技术描写叙述.请大家学习技术就可以.(哈哈) 本实例是基于bmob提供的后台服务,将监听到的短信自己主动上传到bmob数据库中. 一.代码实现: 1.首先实现javabean对象. package com.example.messagecut; import cn.bmob.v3.BmobObject; public class MsgContent extends Bmo