2025年2.WEB前端-JQuery

大家好，我是讯享网，很高兴认识大家。

Jquery

什么是 JQuery :
jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery 的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的 css 选择器，并且可对 CSS 选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery 兼容各种主流浏览器，如google,IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
1. 写更少的代码,做更多的事情: write Less ,Do more
2. 将我们页面的 JS 代码和 HTML 页面代码进行分离
JQ 中根据 ID 查找元素

全都是根据选择器去找的 #ID{} .类名{} $("#ID的名称")

讯享网

JQ 和 JS 之间的转换
JQ 对象,只能调用 JQ 的属性和方法
JS 对象只能调用 JS 的属性和方法

讯享网function changeJS(){
                var div = document.getElementById("div1");
//                div.innerHTML = "JS成功修改了内容"
                //将JS对象转成JQ对象
                $(div).html("转成JQ对象来修改内容")
            }
            
            $(function(){
                //给按钮绑定事件
                $("#btn2").click(function(){
                    //找到div1
//                    $("#div1").html("JQ方式成功修改了内容");
                    //将JQ对象转成JS对象来调用
                    var $div = $("#div1");
//                    var jsDiv = $div.get(0);
                    var jsDiv = $div[0];
                    jsDiv.innerHTML="jq转成JS对象成功";
                });
            });

JQ 的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)
1. 导入 JQ 相关的文件
2. 文档加载完成事件: $ ( function ) : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素
6. 显示和隐藏 img.style.display
使用 JQuery 完成页面定时弹出广告（定时器）:
- setInterval clearInterval
- setTimeout clearTimeout
- 显示: img.style.display = "block"
- 隐藏: img.style.display = "none"
- img 对象
  - style属性: style对象
使用JQuery完成表格的隔行换色
- 获得所有的行
  - table.rows[]
- 修改行的颜色
  - row.bgColor ="red"
  - row.style.backgroundColor = "black"
  - row.style.background = "red"
  - "background-color:red"
  - "background : red"
使用 JQuery 完成复选框的全选效果
- checked 属性
- 如何获取所有复选框:
  - document.getElementsByName get Elements By Name 数据库里
使用JQuery完成省市联动效果
- JS中的数组: ["城市"]
- new Array()
- DOM树操作:
  - 创建节点: document.createElement
  - 创建文本节点: document.createTextNode
  - 添加节点: appendChild（）
使用JQuery完成下列列表左右选择
- select下拉列表
- multiple 允许多选
- ondblclick : 双击事件
- for 循环遍历,一边遍历一边移除出现的问题
使用JQuery完成表单的校验(扩展)，事件:
- 获得焦点事件: onfocus
- 失去焦点事件: onblur
- 按键抬起事件: onkeyup
- 鼠标移入: onmouseenter
- 鼠标移出: onmouseout
- JS 引入外部文件 : script
使用JQuery完成页面定时弹出广告，当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告
- 定时器: setTimeout
- 显示和隐藏: style.display = " block / none "

【JQ中的动画效果】

show : 显示
hide : 隐藏

slideDown: 向下滑动

slideUp: 向上滑动

fadeIn：淡入

fadeOut：淡出

animate : 自定义动画

讯享网

举例：定时弹出广告

<script> //显示广告 function showAd(){ $("#img1").slideDown(2000); setTimeout("hideAd()",3000); } //隐藏广告 function hideAd(){ $("#img1").slideUp(2000); } $(function(){ setTimeout("showAd()",3000); }); </script>

JQuery中的选择器，让我们能够更加精确找到我们要操作的元素，

基本选择器：

基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class 和标签名来查找DOM元素。这个非常重要，下面的内容都是以此为基础，逐级提高的。
1).ID选择器 : #ID的名称“$(“#id”)”，获取id指定的元素，id是全局唯一的，所以它只有一个成员。
2).类选择器: 以 . 开头 .类名：“$(“.class”)”，获取class指定的元素，不同的元素可以具有相同的class属性，所以它可能具有多个成员。
3).元素选择器: 标签的名称：“$(“element”)”，获取element（元素名，比如div、table等）指定的元素，它可能具有多个成员。
4).通配符选择器: *：“$(“*”)”，获取所有元素，相当于document。
5).“$(“selector1,selector2,…,selectorN”)”，将每个选择器匹配到的元素合并后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。

讯享网 <script> //文档加载事件,页面初始化的操作 $(function(){ //初始化操作: 给按钮绑定事件 $("#btn1").click(function(){ $("#two").css("background-color","palegreen"); }); //找出mini类的所有元素 $("#btn2").click(function(){ $(".mini").css("background-color","palegreen"); }); $("#btn3").click(function(){ $("div").css("background-color","palegreen"); }); $("#btn4").click(function(){ $("*").css("background-color","palegreen"); }); /*选择器分组*/ //找出mini类 和 span元素 $("#btn5").click(function(){ $(".mini,span").css("background-color","palegreen"); }); }); </script>

JQ中的层级选择器
- 子元素选择器: 选择器1 > 选择器2 , 找出来的是所有子节点，儿子（只包含第一层子元素），“$(“parent > child”)”
- 后代选择器: 选择器1 选择器2 ，找出来的是选择器1下面的所有选择器2 ，“$(“ancestor descendant”)”
- 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个下一层子元素，“$(“pre + next”)”
- 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的，“$(“pre ~ siblings”)”

<script> //文档加载事件,页面初始化的操作 $(function(){ //初始化操作: 给按钮绑定事件 //找出body下面的子div $("#btn1").click(function(){ $("body > div").css("background-color","palegreen"); }); //找出body下面的所有div $("#btn2").click(function(){ $("body div").css("background-color","palegreen"); }); $("#btn3").click(function(){ $("#one+div").css("background-color","palegreen"); }); $("#btn4").click(function(){ $("#two~div").css("background-color","palegreen"); }); }); </script>

JQ 中的过滤选择器
(1). 基本过滤选择器
a) “:first”，选取第一个元素，别忘记它也是被放在一个集合里哦！因为JQuery它是DOM对象的一个集合。如，“$("tr:first")”返回所有tr元素的第一个tr元素，它仍然被保存在集合中。
b) “:last”，选取最后一个元素。如，“$("tr:last")”返回所有tr元素的最后一个tr元素，它仍然被保存在集合中。
c) “:not(selector)”，去除所有与给定选择器匹配的元素。如，“$("input:not(:checked)")”返回所有input元素，但去除被选中的元素（单选框、多选框）。
d) “:even”，选取所有元素中偶数的元素。因为JQuery对象是一个集合，这里的偶数指的就是集合的索引，索引从0开始。
e) “:odd”，选取所有元素中奇数的元素，索引从0开始。
f) “:eq(index)”，选取指定索引的元素，索引从0开始。
g) “:gt(index)”，选取索引大于指定index的元素，索引从0开始。
h) “:lt(index)”，选取索引小于指定index的元素，索引从0开始。
i) “:header”，选取所有的标题元素，如hq、h2等。
j) “:animated”，选取当前正在执行的所有动画元素。

讯享网 <script> $(function(){ /<script> //文档加载事件,页面初始化的操作 $(function(){ //初始化操作: 给按钮绑定事件 //过滤出所有div中第一个元素 $("#btn1").click(function(){ $("div:first").css("background-color","palegreen"); }); //过滤出所有div中偶数位的div $("#btn2").click(function(){ $("div:even").css("background-color","palegreen"); }); $("#btn3").click(function(){ $("div:odd").css("background-color","palegreen"); }); $("#btn4").click(function(){ $("div:gt(2)").css("background-color","palegreen"); }); }); </script>

(2).JQ 中的属性过滤选择器

通过元素的属性来选取相应的元素。
a) “[attribute]”，选取拥有此属性的元素。
b) “[attribute=value]”，选取指定属性值为value的所有元素。
c) “[attribute !=value]”，选取属性值不为value的所有元素。
d) “[attribute ^= value]”，选取属性值以value开始的所有元素。
e) “[attribute $= value]”，选取属性值以value结束的所有元素。
f) “[attribute *= value]”，选取属性值包含value的所有元素。
g) “[selector1] [selector2]…[selectorN]”，复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合。

// 选择器[href] : 单个属性 $(function(){ //找到有name属性的input $("#btn1").click(function(){ $("input[name]").attr("checked",true); }); $("#btn2").click(function(){ $("input[name='accept']").attr("checked",true); }); $("#btn3").click(function(){ $("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true); }); });

(3).JQ中的表单过滤器

a) “:input”，选取所有<input>、<textarea>、<select >和<button>元素。
b) “:text”，选取所有的文本框元素。
c) “:password”，选取所有的密码框元素。
d) “:radio”，选取所有的单选框元素。
e) “:checkbox”，选取所有的多选框元素。
f) “:submit”，选取所有的提交按钮元素。
g) “:image”，选取所有的图像按钮元素。
h) “:reset”，选取所有重置按钮元素。
i) “:button”，选取所有按钮元素。
j) “:file”，选取所有文件上传域元素。
k) “:hidden”，选取所有不可见元素。

(4).选取表单对象元素属性的过滤选择器。

“:enabled”，选取所有可用元素。
“:disabled”，选取所有不可用元素。
“:checked”，选取所有被选中的元素，如单选框、复选框。
“:selected”，选取所有被选中项元素，如下拉列表框、列表框。

option:selected

讯享网<script> //1.文档加载事件 $(function(){ $(":text").css("background-color","pink"); }); </script>

(5). 内容过滤选择器
它是对元素和文本内容的操作。
a) “:contains(text)”，选取包含text文本内容的元素。
b) “:empty”，选取不包含子元素或者文本节点的空元素。
c) “:has(selector)”，选取含有选择器所匹配的元素的元素。
d) “:parent”，选取含有子元素或文本节点的元素。（它是一个父节点）

(6). 可见性过滤选择器
根据元素的可见与不可见状态来选取元素。
“:hidden”，选取所有不可见元素。
“:visible”，选择所有可见元素。
可见选择器：hidden 不仅包含样式属性 display 为 none 的元素，也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素。

(7).子元素过滤选择器
一看名字便是，它是对某一元素的子元素进行选取的。
a) “:nth-child(index/even/odd)”，选取索引为index的元素、索引为偶数的元素、索引为奇数的元素。
l nth-child(even/odd)：能选取每个父元素下的索引值为偶(奇)数的元素。
l nth-child(2)：能选取每个父元素下的索引值为 2 的元素。
l nth-child(3n)：能选取每个父元素下的索引值是 3 的倍数的元素。
l nth-child(3n + 1)：能选取每个父元素下的索引值是 3n + 1的元素。
b) “:first-child”，选取第一个子元素。
c) “:last-child”，选取最后一个子元素。
d) “:only-child”，选取唯一子元素，它的父元素只有它这一个子元素。

使用JQ完成表格的隔行换色

 $(function(){ //获得所有的行 : 元素选择器 $("tbody > tr:even").css("background-color","#CCCCCC"); //修改基数行 $("tbody > tr:odd").css("background-color","#FFF38F"); // $("tbody > tr").css("background-color","#FFF38F"); });

使用JQuery完成表单的全选全不选功能
使用JQ完成省市联动效果，添加节点 : appendChild (JS)
1. append : 添加子元素到末尾
2. appendTo : 给自己找一个爹,将自己添加到别人家里
3. prepend : 在子元素前面添加
4. after : 在自己的后面添加一个兄弟

讯享网$(function(){ $("#province").change(function(){ // alert(this.value); //得到城市信息 var cities = provinces[this.value]; //清空城市select中的option /*var $city = $("#city"); //将JQ对象转成JS对象 var citySelect = $city.get(0) citySelect.options.length = 0;*/ $("#city").empty(); //采用JQ的方式清空 //遍历城市数据 $(cities).each(function(i,n){ $("#city").append("<option>"+n+"</option>"); }); }); });

使用JQ完成下拉列表左右选择

 <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script> $(function(){ $("#a1").click(function(){ //找到被选中的那一项 //将被选中项添加到右边 $("#rightSelect").append($("#leftSelect option:selected")); }); //将左边所有商品移动到右边 $("#a2").click(function(){ $("#rightSelect").append($("#leftSelect option")); }); }); </script>

总结：

讯享网常用函数:  属性prop() properties : 如果传入一个参数 就是获取  prop("src","../img/1.jpg"); : 设置图片路径  attr : 操作一些自定义的属性 <img abc='123' />  prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性  css() ; 修改css样式  addClass() : 添加一个 class 样式  removeClass() : 移除  blur : 绑定失去焦点  focus: 绑定获得焦点事件  click: 点击  dblclick： 双击  change：更改  append : 给自己添加儿子  appendTo : 把自己添加到别人家  prepend : 在自己子节点最前面添加子节点  after : 在自己后面添加一个兄弟  before: 在自己前面添加一个兄弟  $("数组对象").each(function(index,data))  $.each(arr,function(index,data))

使用JQ完成表单的校验
- trigger : 触发事件，但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为，输入框获得焦点
- triggerHandler : 仅仅只会触发事件所对应的函数
- is()

1. 首先给必填项,添加尾部添加一个小红点
2. 获取用户输入的信息,做相应的校验
3. 事件: 获得焦点, 失去焦点, 按键抬起
4. 表单提交的事件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <script type="text/javascript">7
            
            $(function(){      //  页面初始化
                //必填添加小红点
                    $(".bitian").after("<font class='high'> *</font>");
                    
                    //  必填绑定事件   $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){});  失去焦点。获得焦点，
                    $(".bitian").blur(function(){
                        
                        //用户当前输入的值
                        //var value = this.value;    两种方式都可以得到当前值
                        var value = $(this).val();             
                         //清空上一次的提示信息
                        $(this).parent().find(".formtips").remove();
                        
                        //判断当前的值是哪一项输入的值                        
                        if($(this).is("#username")){                            
                            // 校验用户名：
                            if(value.length < 6){
                                $(this).parent().append("<span class='formtips onError'>用户名太短了</span>");    
                            }else{
                                $(this).parent().append("<span class='formtips onSuccess'>用户正确</span>");    
                            }
                        }                        
                        if($(this).is("#password")){
                            
                        //校验密码
                        if(value.length < 3){
                            $(this).parent().append("<span class='formtips onError'>密码太短了</span>");    
                        }else{
                            $(this).parent().append("<span class='formtips onSuccess'>密码可用</span>");    
                        }
                        }
                        
                        //链式调用，自动校验
                    }).focus(function(){
                        $(this).triggerHandler("blur");  //触发上面定义的 blur 函数
                    }).keyup(function(){
                        $(this).triggerHandler("blur");   
                    });
                    
                    //给表单绑定提交事件
                    $("form").submit(function(){
                        //提交的时候，触发必填项的校验逻辑
                        $(".bitian").trigger("focus"); 
                        //判断错误信息是否包含0
                        var length = $(".onError").length ;
                        if(length > 0){
                            return false ;
                        }else
                        return true;                        
                    });                    
            });
            
        </script>        
        <title></title>
    </head>
    <body>
        <form action="表单校验.html" method="post">
        <div>
            用户名:<input type="text" class="bitian" id="username"/>
        </div>
        <div>
            密码:<input type="password" class="bitian" id="password"/>
        </div>
        <div>
            手机号:<input type="tel" />
        </div>
        <div>
            <input type="submit" value="提交"/>
        </div>
        </form>
    </body>
</html>

著作权所有，转载请注明出处。

Jquery

相关推荐