Jquery入门

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Jquery入门，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含13733字，纯文字阅读大概需要20分钟。

内容图文

jquery介绍

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

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

jquery的口号和愿望 Write Less, Do More（写得少，做得多）

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

jquery文档加载完再执行

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

        <script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

可以简写为：

        <script type="text/javascript">

$(function(){

     ......

});

</script>

jquery选择器

jquery用法思想一
选择某个网页元素，然后对它进行某种操作

jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

        $(‘#myId‘) //选择id为myId的网页元素
$(‘.myClass‘) // 选择class为myClass的元素
$(‘li‘) //选择所有的li元素
$(‘#ul1 li span‘) //选择id为为ul1元素下的所有li下的span元素
$(‘input[name=first]‘) // 选择name属性等于first的input元素

对选择集进行过滤

        $(‘div‘).has(‘p‘); // 选择包含p元素的div元素
$(‘div‘).not(‘.myClass‘); //选择class不等于myClass的div元素
$(‘div‘).eq(5); //选择第6个div元素

选择集转移

        $(‘#box‘).prev(); //选择id是box的元素前面紧挨的同辈元素
$(‘#box‘).prevAll(); //选择id是box的元素之前所有的同辈元素
$(‘#box‘).next(); //选择id是box的元素后面紧挨的同辈元素
$(‘#box‘).nextAll(); //选择id是box的元素后面所有的同辈元素
$(‘#box‘).parent(); //选择id是box的元素的父元素
$(‘#box‘).children(); //选择id是box的元素的所有子元素
$(‘#box‘).siblings(); //选择id是box的元素的同级元素
$(‘#box‘).find(‘.myClass‘); //选择id是box的元素内的class等于myClass的元素

判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

        var $div1 = $(‘#div1‘);
var $div2 = $(‘#div2‘);
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div >这是一个div</div>

jquery样式操作

jquery用法思想二
同一个函数完成取值和赋值

操作行间样式

        // 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

        $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

绑定click事件

给元素绑定click事件，可以用如下方法：

        $(‘#btn1‘).click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

        var $li = $(‘.list li‘).eq(1);
alert($li.index()); // 弹出1
......
<ul >
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
        
jquery 版的选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tab_con{
            margin: 50px auto;
            width: 500px;
            height: 350px;
            

        }
        .tab_btns{
            height: 50px;
        }
        .active{
            background: gold;
        }
        input{
            width: 100px;
            height: 50px;
            background: #ddd;
            border: 0;
            outline: none;
        }
        .tab_cons{
            
            height: 300px;
            background:gold;

        }
        
        /* 在css中要特别注意权重的问题,不然会导致css样式出现错误 */
        .tab_cons div{
            height: 300px;
            line-height: 300px;
            text-align:center;
            
            display: none;
            font-size: 30px;
        }
        .tab_cons .current{
            display: block;
        }
    
    
    </style>

    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $btn = $("input");
            var $div = $(".tab_cons div")
            $btn.click(function(){
                // $(this).css({"background":"gold"});
                // $(this).siblings.css({"background":"#ddd"});

                //$(this).addClass("active");
                //$(this).siblings().removeClass("active");
                
                //以上两句可以合成一句
                $(this).addClass("active").siblings().removeClass("active");
                // 重点是通过索引值来进行按钮和相关div的关联
                alert($(this).index());
                $div.eq($(this).index()).addClass("current").siblings().removeClass("current");

            })
            
            



        })
    
    
    </script>
</head>
<body>
    <div class="tab_con">
        <div class="tab_btns">
            <input type="button" value="按钮一" class="active">
            <input type="button" value="按钮二">
            <input type="button" value="按钮三">
        </div>
        <div class="tab_cons">
            <div class="current">按钮一对应的内容</div>
            <div>按钮二对应的内容</div>
            <div>按钮三对应的内容</div>
        </div>
    </div>

</body>
</html>

jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

        /*
    animate参数：
    参数一：要改变的样式属性值，写成字典的形式
    参数二：动画持续的时间，单位为毫秒，一般不写单位
    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
    参数四：动画回调函数，动画完成后执行的匿名函数

*/

$(‘#div1‘).animate({
    width:300,
    height:300
},1000,‘swing‘,function(){
    alert(‘done!‘);
});

jquery特殊效果

        fadeIn() 淡入

    $btn.click(function(){

        $(‘#div1‘).fadeIn(1000,‘swing‘,function(){
            alert(‘done!‘);
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

        $(‘#div1‘) // id为div1的元素
.children(‘ul‘) //该元素下面的ul子元素
.slideDown(‘fast‘) //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children(‘ul‘) //这些兄弟元素中的ul子元素
.slideUp(‘fast‘);  //高度实际高度变换到零来隐藏ul元素
        
层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $a = $(".level1");
            $a.click(function(){
                // $(this).next().stop().slideToggle();
                $(this).next().stop().slideToggle().parent().siblings().children("ul").slideUp();
            })
        })
    
    </script>

</head>
<body>
        <ul class="menu">
                <li>
                    <a href="#" class="level1">手机</a>
                    <ul class="current">
                        <li><a href="#">iPhone X 256G</a></li>
                        <li><a href="#">红米4A 全网通</a></li>
                        <li><a href="#">HUAWEI Mate10</a></li>
                        <li><a href="#">vivo X20A 4GB</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="level1">笔记本</a>
                    <ul>
                        <li><a href="#">MacBook Pro</a></li>
                        <li><a href="#">ThinkPad</a></li>
                        <li><a href="#">外星人(Alienware)</a></li>
                        <li><a href="#">惠普(HP)薄锐ENVY</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="level1">电视</a>
                    <ul>
                        <li><a href="#">海信(hisense)</a></li>
                        <li><a href="#">长虹(CHANGHONG)</a></li>
                        <li><a href="#">TCL彩电L65E5800A</a></li>				
                    </ul>
                </li>
                <li>
                    <a href="#" class="level1">鞋子</a>
                    <ul>
                        <li><a href="#">新百伦</a></li>
                        <li><a href="#">adidas</a></li>
                        <li><a href="#">特步</a></li>
                        <li><a href="#">安踏</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="level1">玩具</a>
                    <ul>
                        <li><a href="#">乐高</a></li>
                        <li><a href="#">费雪</a></li>
                        <li><a href="#">铭塔</a></li>
                        <li><a href="#">贝恩斯</a></li>
                    </ul>
                </li>
                
            </ul>
        
</body>
</html>

jquery属性操作

1、html() 取出或设置html内容

        // 取出html内容

var $htm = $(‘#div1‘).html();

// 设置html内容

$(‘#div1‘).html(‘<span>添加文字</span>‘);

2、prop() 取出或设置某个属性的值

        // 取出图片的地址

var $src = $(‘#img1‘).prop(‘src‘);

// 设置图片的地址和alt属性

$(‘#img1‘).prop({src: "test.jpg", alt: "Test Image" });

聊天对话框实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .talk_con{
            width:600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
           margin:10px; 
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">      
       //入口函数

       $(function(){
        // 获取元素
        var $words = $("#words"),
        $id =$("#who"),
        $talk = $("#talkwords"),
        $btn = $("#talksub");
        
        //绑定事件

        $btn.click(function(){
            var $talk_con = $talk.val();
            // 清除聊天框内容
            $talk.val("")
            //判断内容是否为空
            if($talk_con==""){
                alert("请输入聊天内容!");
                return;
            }
            // 判断是谁说的
            var sTr = ‘‘
            if($id.val()==0){
                //拼接字符串
                sTr += ‘<div class="atalk"><span>A说：‘+$talk_con+‘</span></div>‘;
                //alert(sTr)
                $words.html($words.html()+sTr);
                
            }
            else{
                //拼接字符串
                sTr += ‘<div class="btalk"><span>B说：‘+$talk_con+‘</span></div>‘;
                //  alert(sTr)
                $words.html($words.html()+sTr);
            }
        })
       })

    </script>
</head>
<body>
    <div class="talk_con">
        <div class="talk_show" id="words">
            <div class="atalk"><span>A说：吃饭了吗？</span></div>
            <div class="btalk"><span>B说：还没呢，你呢？</span></div>
        </div>
        <div class="talk_input">
            <select class="whotalk" id="who">
                <option value="0">A说：</option>
                <option value="1">B说：</option>
            </select>
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送" class="talk_sub" id="talksub">
        </div>
    </div>
</body>
</html>

jquery事件

事件函数列表：

        blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单

单验证

1、什么是正则表达式：
能让计算机读懂的字符串匹配规则。

2、正则表达式的写法：
var re=new RegExp(‘规则‘, ‘可选参数‘);
var re=/规则/参数;

3、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符

        var sTr01 = ‘123456asdf‘;
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾

7、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感

8、常用函数
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

正则默认规则
匹配成功就结束，不会继续匹配，区分大小写

常用正则规则

        //用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;

//邮箱验证：        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;

//手机号码验证：
var rePhone = /^1[34578]\d{9}$/;

表单注册实例

$(function(){

	var error_name = true;
	var error_pwd = true;
	var error_check_pwd = true;
	var error_email = true;
	var error_check = false;

   var $name = $(‘#user_name‘);
   var $pwd = $(‘#pwd‘);
   var $cpwd = $(‘#cpwd‘);
   var $email = $(‘#email‘);
   var $allow = $(‘#allow‘);


	$name.blur(function() {
		check_user_name();
	}).click(function() {
		$(this).next().hide();
	});



	$pwd.blur(function() {
		check_pwd();
	}).click(function() {
		$(this).next().hide();
	});

	$cpwd.blur(function() {
		check_cpwd();
	}).click(function() {
		$(this).next().hide();
	});

	$email.blur(function() {
		check_email();
	}).click(function() {
		$(this).next().hide();
	});


	$allow.click(function() {
		if($(this).is(‘:checked‘))
		{
			error_check = false;
			$(this).siblings(‘span‘).hide();
		}
		else
		{
			error_check = true;
			$(this).siblings(‘span‘).html(‘请勾选同意‘);
			$(this).siblings(‘span‘).show();
		}
	});


	function check_user_name(){
		//数字字母或下划线
		var reg = /^\w{6,15}$/;
		var val = $name.val();

		if(val==‘‘){
			$name.next().html(‘用户名不能为空！‘).show();
			//$name.next().show();
			error_name = true;
			return;
		}
		if(reg.test(val))
		{
			$name.next().hide();
			error_name = false;
		}
		else
		{
			$name.next().html(‘用户名是6到15个英文或数字，还可包含“_”‘)
			$name.next().show();
			error_name = true;
		}
	}


	function check_pwd(){
		var reg = /^[\w@!#$%&^*]{6,15}$/;
		var val = $pwd.val();

		if(val==‘‘){
			$pwd.next().html(‘密码不能为空！‘)
			$pwd.next().show();
			error_pwd = true;
			return;
		}

		if(reg.test(val))
		{
			$pwd.next().hide();
			error_pwd = false;
		}
		else
		{
			$pwd.next().html(‘密码是6到15位字母、数字，还可包含@!#$%^&*字符‘)
			$pwd.next().show();
			error_pwd = true;
		}		
	}


	function check_cpwd(){
		var pass = $(‘#pwd‘).val();
		var cpass = $(‘#cpwd‘).val();

		if(pass!=cpass)
		{
			$cpwd.next().html(‘两次输入的密码不一致‘)
			$cpwd.next().show();
			error_check_pwd = true;
		}
		else
		{
			$cpwd.next().hide();
			error_check_pwd = false;
		}		
		
	}

	function check_email(){
		var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
		var val = $email.val();

		if(val==‘‘){
			$email.next().html(‘邮箱不能为空！‘)
			$email.next().show();
			error_email = true;
			return;
		}

		if(re.test(val))
		{
			$email.next().hide();
			error_email = false;
		}
		else
		{
			$email.next().html(‘你输入的邮箱格式不正确‘)
			$email.next().show();
			error_email = true;
		}

	}


	$(‘.reg_form form‘).submit(function() {

		if(error_name == false && error_pwd == false && error_check_pwd == false && error_email == false && error_check == false)
		{
			return true;
		}
		else
		{
			return false;
		}

	});

})

原文：https://www.cnblogs.com/yinjiangchong/p/9309342.html

内容总结

以上是互联网集市为您收集整理的Jquery入门全部内容，希望文章能够帮你解决Jquery入门所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1250440.html

来源：【匿名】

【上一篇】Kendo UI for jQuery使用教程：支持Web浏览器【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【Jquery入门】教程文章相关的互联网学习教程文章

jquery介绍jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。<script type="text/javascript" src="js/jque...

jquery 简单入门【图】

例：GridView 原文：https://www.cnblogs.com/asdyzh/p/9746899.html

浅谈jQuery，老司机带你jQuery入门到精通【代码】

1. 何为jQuery？1.1、jQuery介绍　　jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。　　jQuery凭借简介的语法和跨浏览器的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发AJAX的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编...

JQuery入门【代码】

JQuery 基础概念：一个JavaScript框架。简化JS开发jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。JavaScript框架：本质上就是一些js文件，封装了js的原生代...

jQuery入门学习之安装及语法【代码】

说明jQuery 是一个 JavaScript 函数库，可大大简化JavaScript编程。主要用于HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities安装方案一：下载jQuery-->把jQuery添加到网页两个版本的 jQuery 可供下载：Production version - 用于实际的网站中，已被精简和压缩。Development version - 用于测试和开发（未压缩，是可读的代码）下载地址http://jquery.com/download/添加到网...

jQuery从入门到放弃(二)【图】

jQuery的属性操作：　　对于元素的固有属性：element.prop();　　对于元素的自定义属性：element.attr();　　数据缓存：element.data();jQuery的文本属性值：　　element.html(); 类似dom中的innerHTML　　element.text(); 类似dom中的innerText　　element.val(); 类似dom中的value方法　　原文：https://www.cnblogs.com/wuyuchuan/p/15003554.html

JQuery入门【代码】

什么是JQuery:jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选...

JQuery入门(3)【代码】

6.属性过滤选择器<scripttype="text/javascript"> $(function(){//显示所有包含id属性的元素 1$("div[id]").show(3000); }) $(function(){//显示所有属性title的值是"A"的元素 2$("div[title=‘A‘]").show(3000); }) $(function(){//显示所有属性title的值不是"A"的元素 3$("div[title!=‘A‘]").show(3000); }) $(function(){//显示所有属性title的值是"A"开始的元素 4$("div[title^=‘A‘]").show(3000); }) $(function()...

JQuery入门(6)【代码】

一、一次性事件 one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理器函数。语法形式：$(selector).one(event,[data],function)其中event参数必需，当添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data参数可选，是传递到函数的额外数据。function参数必需，当事件发生时运行的函数。示例如下：<scripttype="text/javasc...

jQuery入门学习笔记（一）【代码】

最容易混淆的几个概念jQuery对象不等于DOM对象DOM是Document Object Model的缩写，中文是文档对象模型。它是HTML和XML的应用程序接口，DOM将整个页面映射为一个由层次节点组成的文件。【例1】 <!DOCTYPE html><htmllang="en"><head><title>标准DOM示例</title></head><body><h1>这是一份简单的文档对象模型</h1><ul><li>D表示文档</li><li>O表示对象</li><li>M表示模型</li></ul></body></html>在这棵DOM树中，标签都是标签的子...

jQuery入门知识点介绍

一、JQ的简单介绍JQ是js的一个库，封装了开发时常用的一些功能，初期学习JQ主要是学习操作DOM的一些方法，调用JQ中封装的一些API来进行DOM 的操作，大部分都是方法。JQ的两大特点：1、链式编程，如.show( )和.html( )可以写成一个.show( ).html( )2、隐式便利，JQ可以在方法内部进行便利，而不用我们直接便利操作二、使用JQ的几个步骤1、引入JQ2、编写入口函数，一般有三种写法，且和JS入口函数不一样，可以编写多次，不会出现事件...

JQuery入门(1) - 选择器【代码】

JQuery入门（1） - 选择器$("元素") // 选取元素 $("元素.类名") // 选取元素中class为“类名”的元素 $("元素.#ID") // 选取元素中的元素 $("[属性]") // 选取包含“属性”的所有元素 $("[属性]=‘值‘") // 选取属性等于‘值’的元素 $("[属性]!=‘值‘") // 选取属性不等于‘值’的元素 $("[属性]^=‘值‘") // 选取属性值以‘值’开头的元素 $("[属性]$=‘值‘") // 选取属性值...

Jquery入门【代码】

1、基本文件：jquery.min.js2、简单的基础方法：$(document).ready(function(){alert(‘ready function!‘); });//页面加载时执行$(function(){alert(‘function!‘); });//页面加载完毕时执行<script src="common/js/lib/LAB.min.js"></script> <script type="text/javascript"> $LAB .script("<%=basePath%>common/js/lib/jquery.min.js").wait() //jQuery .script(‘<%=basePath%>common/js/index.js‘).wait(); </...

jQuery入门（1）【代码】

1、jQuery的优势：轻量级。jQuery非常轻巧，最新的jQuery版本压缩后，大小保持在80k左右。强大的选择器。jQuery允许使用从CSS1到CSS3几乎所有的选择器，以及jQuery自己的高级而复杂的选择器。甚至你可以编写属于自己的选择器。出色的DOM操作的封装；jQuery封装了大量常用的DOM操作，让你能轻松地完成各种原本非常复杂的操作。可靠的事件处理机制；完善的Ajax；jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理...

JQuery 入门指南(1):入门必备

安装如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后把它包含在希望使用的网页中。 jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：<head> <script src="jquery.js"></script> </head> 如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它 Google CDN:<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script> </...

首页 / JQUERY / Jquery入门

Jquery入门

内容导读

内容图文

jquery介绍

jquery文档加载完再执行

jquery选择器

jquery样式操作

绑定click事件

jquery动画

jquery特殊效果

jquery链式调用

jquery属性操作

jquery事件

单验证

内容总结

内容备注

内容手机端

【Jquery入门】教程文章相关的互联网学习教程文章

Jquery入门【代码】

jquery 简单入门【图】

浅谈jQuery，老司机带你jQuery入门到精通【代码】

JQuery入门【代码】

jQuery入门学习之安装及语法【代码】

jQuery从入门到放弃(二)【图】

JQuery入门【代码】

JQuery入门(3)【代码】

JQuery入门(6)【代码】

jQuery入门学习笔记（一）【代码】

jQuery入门知识点介绍

JQuery入门(1) - 选择器【代码】

Jquery入门【代码】

jQuery入门（1）【代码】

JQuery 入门指南(1):入门必备

入门 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程