JQuery

最新推荐文章于 2024-06-15 20:48:16 发布

goature

最新推荐文章于 2024-06-15 20:48:16 发布

阅读量1.9k

点赞数 14

文章标签： jquery

本文链接：https://blog.csdn.net/gcdnf16/article/details/99288966

版权

第一章 JQuery 选择器

第一节 JQuery简介

jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。JQuery是继prototype之后的又一个优质的Javascript库，属于开源编程语言。JQuery就是JavaScript的数组包装，JQuery使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详尽，同时还有很多成熟的插件可供选择。jQuery可以使用户的html页面保持代码和html的内容分离，也就是说，不需要再在 html里面插入一堆js来调用命令了，只需要定义id即可。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

2006年1月，jQuery第一个版本发布，它以简洁、灵活的编程风格让人一见倾心。

jQuery发展至今，更新了十几个新版本。

1、不能向后兼容。每一个新版本不能兼容早期的版本。

2、插件兼容性不是太好，与上一点类似。

3、在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。

4、在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

第二节 JQuery文档加载事件

第一种 document ready 函数中：

$(document).ready(function(){
    .....
})

第二种简洁写法：

$(function(){
    
    ......
})

第三节 JQuery基本选择器和常用函数

1.基本选择器

基本选择器	说明
#id	根据CSS id选择器的名字来获取页面元素，相当于document.getElementById( ) 一定要加#号啊啊啊
.class	根据CSS类选择器的名字来获取页面元素
element	根据CSS标签选择器的名字来获取页面元素，相当于document.getElementsByName( )
*	获取页面所有元素
selector1，selector2，...	获取每一个选择器所匹配的元素

2.常用函数

函数	说明
html( )	设置或获取innerHTML属性的值
text( )	设置或获取innerText属性的值
val( )	设置或获取value的属性的值
size( )	获取元素集合的长度
each( )	遍历元素集合
css( )	设置行内样式
addClass( )	设置元素class属性的值
removeClass( )	删除元素class属性的值

3.示例

表单校验

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    .red{border:1px solid red;}
  </style>
  <script src="jq/jquery-1.12.4.min.js"></script>
  <script>
    $(function(){
        var flag=true;
        $(":text:not(#fina)").blur(function (){
            if ($(this).val()=="")
            {
                $(this).addClass("red");
                flag=false;
            }
            if ($(this).val()!="")
            {
                $(this).removeClass("red");
                flag=true;
            }
            if (this.id=="num1"||this.id=="num2")
            {
                if(/^\d+$/.test($(this).val())==false)
                {
                    $(this).addClass("red");
                    flag=false;
                }
                else
                {
                    $(this).removeClass("red");
                    flag=true;
                }
            }
            if (this.id=="c")
            {
                if(/^[\+\-\*\/]{1}$/.test($(this).val())==false)
                {
                    $(this).addClass("red");
                    flag=false;
                }
                else
                {
                    $(this).removeClass("red");
                    flag=true;
                }
            }
        })

        $(":button").click(function(){
            $(":text:not(#fina)").blur();
            if (flag)
            {
                if ($("#c").val()=="+")
                {
                    $("#fina").val(Number($("#num1").val())+Number($("#num2").val()));
                }
                if ($("#c").val()=="-")
                {
                    $("#fina").val(Number($("#num1").val())-Number($("#num2").val()));
                }
                if ($("#c").val()=="*")
                {
                    $("#fina").val(Number($("#num1").val())*Number($("#num2").val()));
                }
                if ($("#c").val()=="/")
                {
                    $("#fina").val(Number($("#num1").val())/Number($("#num2").val()));
                }
            }
        });
    
    })
  </script>
 </head>
 <body>
  <input type="text" name="" id="num1"/>
  <input type="text" name="" id="c"/>
  <input type="text" name="" id="num2"/>
  <input type="text" name="" id="fina" />
  <input type="button" name=""  value="计算"/>
 </body>
</html>

样式设置

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
    #bar
    {
        border-bottom:3px solid orange;
        padding-left:30px;
    }
    #bar a
    {
        display:inline-block;
        width:80px;
        height:30px;
        text-align:center;
        line-height:30px;
        text-decoration:none;
    }
    #bar a.on
    {
        color:white;
        background-color:orange;
        border-radius:5px 5px 0px 0px;
    }

  </style>
  
  <script type="text/javascript"
          src="jquery-1.12.4.js">
  </script>

  <script type="text/javascript">
    $(function(){
        $("a").click(function(){
            $("a").removeClass("on");
            $(this).addClass("on");
        })
    })
  </script>
 </head>

 <body>
  <div id="bar">
    <a href="#" class="on">天猫</a>
    <a href="#">淘宝</a>
    <a href="#">店铺</a>
  </div>
 </body>
</html>

第四节 JQuery对象和DOM对象的转换

//获取jQ对象
var jq = $("选择器");
//将jQ对象转为js对象
//var jsObj = jq[0];
var jsObj = jq.get(0);

//获取js对象
var jsdx = document.getElementById("id名");
//将js对象转为jq对象
var jqObj = $(jsdx);

第五节其他选择器

层次选择器	说明
$("a b")	匹配并获取a元素里的所有后代b元素
$("parent>child")	匹配并获取parent元素里的子元素
$("prev+next")	匹配并获取紧挨着prev元素后的next(下一个)元素
$("prev~siblings")	匹配并获取prev元素后的所有siblings（兄弟）元素

属性选择器	说明
$("seletor [ attr ]")	获取匹配selector选择器的并且拥有attr属性的元素
$(“ selector [ attr = 'val' ]”)	获取匹配selector选择器的并且attr属性的值是val的元素
$("selector [ attr != 'val' ]")	获取匹配selector选择器的并且attr属性的值不是val的元素
$("selector [ attr ^= 'val' ]")	获取匹配selector选择器的并且attr属性的值是以val开头的元素
$(" selector [ attr $=' val ' ] ")	获取匹配selector选择器的并且attr属性的值是以val结束的元素
$(" selector [ attr *=' val ' ] ")	获取匹配selector选择器的并且attr属性的值是包含val结束的元素
$(" selector [ ] ...")	属性选择器组合

表单选择器名称	说明
:input	匹配并获得表单中所有的input,textarea,select和button元素
:text	匹配并获得所有的文本框
:password	匹配并获得所有密码框
:radio	匹配并获得所有单选按钮
:checkbox	匹配并获得所有复选框
:submit	匹配并获得所有提交按钮
:image	匹配并获得所有图片
:reset	匹配并获得所有重置按钮
:button	匹配并获得所有按钮
:file	匹配并获得所有文件域
:hidden	匹配并获得所有隐藏域

表单属性	说明
:checked	匹配并获得所有被选中的复选框
:selected	匹配并获得下拉列表框的选中项

过滤选择器名称	说明
:first	获得匹配到的第一个元素
:last	获得匹配到的最后一个元素
:not(seletor)	获得除了匹配的元素之外的元素
:even	匹配所有索引值为偶数的元素，从0开始计数
:odd	匹配所有索引值为奇数的元素，从0开始计数
:eq(index)	匹配一个给定索引值的元素，从0开始计数
:gt(index)	匹配所有大于给定索引值的元素，从0开始计数
:lt(index)	匹配所有小于给定索引值的元素，从0开始计数

第二章 jQuery DOM操作、事件、动画

第一节 DOM操作

节点添加函数	说明
append( )	A.append( B),把B添加到A元素内的尾部
prepend( )	A.append( B),把B添加到A元素内的头部
before( )	A.before( B),把B添加到A的后面
after( )	A.after( B),把B添加到A的后面

节点删除函数	说明
remove( )	A.remove( ),把A从页面中删除掉
empty( )	A.empty( ), 把A中的所有子元素删除掉

节点复制函数名称	说明
clone( )	复制一个节点

节点过滤函数	说明
eq( )	获得匹配到的第一个元素
first( )	获得匹配到的最后一个元素
last( )	获得除了匹配的元素之外的元素
slice( )	匹配指定开始位置和结束位置的元素，默认从0开始计数

节点查找函数	说明
children( )	根据条件获取元素的子元素
parent( )	获取元素的父元素
prev( )	获取紧挨着的前一个平级元素
next( )	获取紧挨着的后一个平级元素
find( )	根据条件找出元素的后代元素
siblings( )	找出与元素平级的所有其他元素

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    div{border:1px solid red;}
    .d1{width:100px;height:100px;background:pink;
    margin:5px;float:left;}
  </style>
  <script src="jq/jquery-1.12.4.min.js"></script>
  <script>
    $(function(){
        $(":button").eq(0).click(function(){
            for (var i=1;i<=Number($(":text").val());i++)
            {
                $("div").eq(0).append("<div class='d1'></div>");
            }
        
        });
        $(":button").eq(1).click(function(){
                $("div").eq(0).remove();
        });
        $(":button").eq(2).click(function(){
                $("div").eq(0).empty();
        });
    
    })
  </script>
 </head>
 <body>
  
  <input type="text" name="" />
  <input type="button" value="添加" />
  <input type="button" value="删除div容器" />
  <input type="button" value="删除div内容" />
  <div>

  </div>
 </body>
</html>

第二节动画

函数	说明
show( )	元素显示动画特效
hide( )	元素隐藏动画特效
toggle( )	元素显示/隐藏切换动画特效

函数	说明
slideDown( )	元素向下滑动特效(高度增加)
slideUp( )	元素向上滑动特效(高度减少)
slideToggle( )	元素向上/向下滑动切换特效

函数	说明
fadeIn( )	元素淡入动画特效(透明度从0到1)
fadeOut( )	元素淡出动画特效(透明度从0到1)
fadeTo( )	调整元素的透明度到指定值(0到1范围内的小数)
fadeToggle( )	元素淡入/淡出切换动画特效

函数	说明
animate( )	这是jQuery中创建自定义动画的函数
delay( )	延时推迟动画

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    #d1{
    width:10px;
    height:10px;
    background:pink;
    position:absolute;
    }
  </style>
  <script src="jq/jquery-1.12.4.min.js"></script>
  <script>
  function test()
  {
    $("#d1").animate({left:200,width:200,height:200,opacity:0},1000);
    setTimeout(test1(),1000);
  }
   function test1()
  {
    $("#d1").animate({left:0,width:10,height:10,opacity:1},1000);
    setTimeout(test(),1000);
  }
  </script>
 </head>
 <body>
 <input type="button" value="测试" onclick="test()"/>
  <div id="d1"></div>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
    #con
    {
        width:400px;
        height:200px;
        border:1px solid red;
        margin:100px auto;
        overflow:hidden;

        position:relative;
    }

    ul
    {
        list-style:none;
        margin:0px;
        padding:0px;
    }
    #imgs
    {
        height:200px;
        width:2000px;
        position:relative;
        left:0px;
        top:0px;
    }
    #imgs img
    {
        width:400px;
        height:200px;
    }
    #imgs li
    {
        float:left;
    }
    #nums
    {
        position:absolute;
        bottom:10px;
        right:10px;
    }
    #nums li
    {
        float:left;
        width:20px;
        height:20px;
        border:1px solid red;
        background-color:white;
        text-align:center;
        line-height:20px;
        margin-left:10px;
    }
    #nums li.on
    {
        background-color:black;
        color:white;
    }
  </style>
  <script type="text/javascript" src="jquery-1.12.4.js">
  </script>
  <script type="text/javascript">
  var imgAry=["bg1.jpg","bg2.jpg","bg3.jpg","bg4.jpg","bg5.jpg"];
    $(function(){
        $(imgAry).each(function(i,data){
            $("#imgs").append("<li><img src='img/"+data+"'></li>");
            $("#nums").append("<li>"+(i+1)+"</li>");
        })
        $("#nums li:first").addClass("on");

        $("#nums li").click(function(){
            //alert(this.innerHTML);
            $(this).siblings().removeClass("on");
            $(this).addClass("on");
            var index = $(this).index();
            $("#imgs").animate({left:-index*400},1000);
        })
    })
  </script>
 </head>

 <body>
  <div id="con">
    <ul id="imgs">
    </ul>
    <ul id="nums">
    </ul>
  </div>
 </body>
</html>

第三节事件

jQuery事件	说明
ready( fn )	页面加载完毕时发生的事件
blur([data],fn )	元素失去焦点时发生的事件
change([data],fn)	元素的值发生改变时发生的事件
click([data],fn)	单击鼠标时发生的事件
dbclick( [data],fn)	双击鼠标时发生的事件
focus([data],fn])	元素获得焦点时发生的事件
键盘事件	----------------------------------------------------------------
keydown([data],fn)	按下键盘时发生的事件
keyup([data],fn)	松开键盘时发生的事件
keypress([data],fn)	按下并松开键盘时发生的事件
鼠标事件	------------------------------------------------------------------
mousedown([data],fn)	按下鼠标按钮时发生的事件
mousemove([data],fn)	鼠标移动时发生的事件
mouseout([data],fn)	鼠标离开某元素时发生的事件
mouseover([data],fn)	鼠标悬浮在某元素上时发生的事件
mouseup([data],fn)	松开鼠标按钮时发生的事件
-------------------------------------	-----------------------------------------------------------------
scroll([data],fn)	页面滚动时发生的事件
select([data],fn)	input元素的选取事件

动态绑定事件函数	说明
on	1.7版本中新增的事件绑定函数，用来逐步代替bind和live,性能好
off	用来移除某元素的事件，与on相反

$("#btn").on("click",{sfz:$("#txt").val()},function(e)
{
      if(e.data.sfz=="")
    alert("身份证号不能为空！");
     else{
    var y=e.data.sfz.substr(6,4);
    var m=e.data.sfz.substr(10,2);
    var d=e.data.sfz.substr(12,2);
    alert("出生日期是："+y+"年"+m+"月"+d+"日");
            }
        }
    )

动态绑定

//动态绑定 对于新的元素也可以绑定
$(document).on("click",".mover",function(){
    alert(this.id);
})
//卸载事件
$(document).off("click",".mover");

模拟触发事件

jQuery对象 . trigger ( "事件名");

goature

关注

14
点赞
踩
47

收藏

觉得还不错? 一键收藏
0
评论
JQuery

第一章 JQuery 选择器第一节 JQuery简介jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。JQuery是继prototype之后的又一个优质的Javascript库，属于开源编程语言。JQuery就是JavaScript的数组包装，JQuery使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、eve...
复制链接

扫一扫