Web之JQuery用法和小例子

最新推荐文章于 2021-03-02 00:08:57 发布
最新推荐文章于 2021-03-02 00:08:57 发布
阅读量258 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a17853481576/article/details/109165110
版权

jQuery中文文档：https://jquery.cuishifeng.cn/

一、jQuery

1、二者可以相互转换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="i1">123</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#i1")[0]
        document.getElementById('i1')
    </script>
</body>
</html>

--------
jquery对象[0] ==> dom对象
$(dom对象) ==> jqery对象
2、选择器
1、id		$('#id')
2、class	$('.c1')
3、标签		$('a')
4、组合
	<div id='i1' class='i2'>
	<a>ada</a>
	</div>
			$('a,#i1,.i2')
5、层级选择器，找某个标签里面的某个标签
			$('#i1 a')	找到id=i1层级下的a标签,子子孙孙
			$('#i1>a')	找到id=i1层级下的a标签,只找儿子
6、基本选择器
			$('a:first')	找到a标签里的第一个
			$('a:last')		找到a标签里的最后一个
			$('a:even')		找到a标签里的奇数行,即索引值的第0,2,4...行
			$('a:odd')		找到a标签里的偶数行,即索引值的第1,3,5...行
			$('a:eq(1)')	找到a标签里的索引为1的行,即第二行
7、属性选择器
	<div lishang="xiaomeng"></div>
	<div lishang="kaixin"></div>
			$('[lishang]')				找到具有lishang这个属性的标签
			$('[lishang="xiaomeng"]')	找到lishang=xiaomeng的标签
3、筛选器
$('#li').next()				找到当前标签的下一个同辈标签
$('#li').nextAll()			找到匹配的标签下所有的同辈标签
$('#li').nextUntil('.i1')	找到id为'li'下直到class为'i1'的全部同辈标签
$('#li').prev()				找到当前标签的上一个同辈标签
$('#li').prevAll()			找到当前标签的前面的所有同辈标签
$('#li').prevUntil('.i1')	找到当前标签的前面的所有同辈标签直到样式'i1'
$('#li').parent()			找到当前标签的父标签
$('#li').parents()			找匹配标签的全部父类直到祖宗
$('#li').parentsUntil('#i1')往上找祖宗直到id='i1'
$('#li').children()			找到当前标签的孩子标签
$('#li').siblings()			找到当前标签的兄弟标签
$('#li').find('.co')		找当前标签下子子孙孙中class为'co'的标签
$('#li').eq(n)				找到当前标签的第n+1个标签
$('#li').first()			找到匹配的第一个元素
$('#li').last()				找到匹配的最后一个元素
$('#li').hasClass('.i1')	是否有'i1'这个样式的标签
4、样式操作篇
$(this).addclass('c1 c2')		给当前标签加上'c1''c2'两条class属性
$(this).removeClass('c3')		给当前标签删掉'c1'这条class属性
$('.c1').toggleClass('hide');	样式为'c1'的标签若有hide样式就去掉,否则加上
$(tag).css('color')				获取匹配标签的颜色
$(tag).css('color','red')		设置匹配标签样式中颜色改为红色
$(tag).css('fontSize','15' + 'px');	设置各种属性,大小
$(tag).css('top','0' + 'px');	距顶部大小
$(tag).css('right','0' + 'px');	距右侧大小
$(tag).css('opacity','1');		透明度
位置
$('window').scrollTop()			获取整个页面窗口当前滑轮的上下位置
$('window').scrollTop(0)		回到顶部
$('window').scrollLeft()		获取整个页面窗口当前滑轮的左右位置
$('window').scrollLeft(0)		回到最左端
$('#i3').offset()				获取匹配标签的坐标
$('#i3').offset().top			获取匹配标签的纵坐标
$('#i3').offset().left			获取匹配标签的横坐标
$('#i3').position()				获得标签相对于父标签(relative)的坐标
$('#i3').height()				获取标签的纯高度
$('#i3').innerHeight()			获取边框 + 纯高度?
$('#i3').outerHeight()			获取边框 + 纯高度?
$('#i3').outerHeight(true)		获取边框 + 纯高度?
5、属性操作
<input id="i1" type="button" value="开关">

$('#i1').attr('type')			获取匹配行type的值===button
$('#i1').attr('name','lishang')	修改匹配行name的值为'lishang',无则新增
$('#i1').removeAttr('name')		删除匹配行name属性


专门用于checkbox,radio
$('#i2').prop('checked',false);	为复选框取消选中
$('#i2').prop('checked',true);	为复选框打上对勾
##### 6、内容操作
```javascript
文本操作：
	$('#i1').text()				获取文本内容
	$('#i1').text('dada')		给这个标签的内容赋新值
	$('#i2').html()				获取全部的内容
	$('#i2').html('hello')		设置内容,解析标签
	$('#i3').val()				获取文本框里的内容
	$('#i3').val("1.1.1.1")		设置文本框里的内容
6、文档处理
$('#u1').append(tmp)		在匹配id='u1'的标签内部末尾添加tmp
$('#u1').prepend(tmp)		在匹配id='u1'的标签内部上面添加tmp
$('#u1').after(tmp)			在匹配的标签外部向下添加tmp
$('#u1').before(tmp)		在匹配的标签外部向上添加tmp
$('#u1 li').empty()			只删除标签的内容,标签本身还存在
$('#u1 li').remove()		连标签同时删掉
$('#u1 li').clone()			给匹配的标签克隆一份一样的
7、事件
1、事件的绑定方式,4种,前3种都是调用的最后一种on的方式
$('.c1').click()
$('.c1').....

$('.c1').bind('click',function(){})
$('.c1').unbind('click',function(){})

$('.c1').delegate('a','click',function(){})
$('.c1').undelegate('a','click',function(){})
具有委托功能,给后来添加的标签也具有和之前标签一样的绑定事件的功能,应用于例子3

$('.c1').on('click',function(){})
$('.c1').off('click',function(){})

2、阻止事件的发生
return false

3、当页面框架加载完成后自动执行,绑定事件用这种更好
$(function(){})
8、扩展

两种方式，不同的扩展方式，不同的调用方式

1、第一种：$.extend()调用
$.extend({
	'lishang': function(){
     	return 'good';
        }
});
var v = $.lishang();
alert(v)

2、第二种：
$.fn.extend({
	'lishang': function(){
     	return 'good';
        }
});
var v = $('#i1').lishang();
alert(v)

二、例子

1、多选与反选取消
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="全选" onclick="checkAll();">
<input type="button" value="反选" onclick="reverseAll();">
<input type="button" value="取消" onclick="clearAll();">

<table border="1" id="t1">
    <thead>
    <tr>
        <th>选项</th>
        <th>IP</th>
        <th>port</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.2</td>
        <td>443</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.3</td>
        <td>3306</td>
    </tr>
    </tbody>

</table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#t1: checkbox').prop('checked',true);
        }
        function clearAll() {
            $('#t1: checkbox').prop('checked',false);
        }
        function reverseAll() {
        	// $(':checkbox').each() 会自动循环所有的带有checkbox的标签
            $('#t1 :checkbox').each(function() {
                // this 代指当前循环的每个元素
                
                // 用dom实现(下面4行)
                // if(this.checked){
                //     this.checked = false;
                // }else {
                //     this.checked = true;
                // }
                
                // 用jquery实现
                // if($(this).prop('checked')){
                //     $(this).prop('checked',false);
                // }else{
                //     $(this).prop('checked',true);
                // }
                
                // 也是用jquery实现,引入了三元运算的写法,(var v = 条件?真值:假值)
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

注：其中获取当前标签是否选中时用了两种方式实现，dom 和 jquery分别实现
$(':checkbox').each(function(k)
	k		指当前循环的索引
	$(this)	当前循环的元素,加上$()以后就成了jquery对象
三元运算的写法,(var v = 条件?真值:假值)
2、选中左侧标题展开该目录,点击另一个,打开这一个同时关闭其他
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: #ff755f;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height: 400px;width: 200px; border: 1px solid #1E84E7;">
        <div class="item">
            <div class="header">标题一</div>
            <div class="content hide">内容1</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容1</div>
            <div class="content hide">内容2</div>
        </div>
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容1</div>
            <div class="content hide">内容2</div>
            <div class="content hide">内容3</div>
        </div>
        <div class="item">
            <div class="header">标题四</div>
            <div class="content hide">内容1</div>
            <div class="content hide">内容2</div>
            <div class="content hide">内容3</div>
            <div class="content hide">内容4</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){

            // $(this)当前选择的标签, .siblings()所有的兄弟标签, removeClass('hide')移除class样式'hide'
            // $(this).siblings().removeClass('hide');
            // $(this).parent().siblings().find('.content').addClass('hide');

            // jquery支持链式编程
            $(this).siblings().removeClass('hide').parent().siblings().find('.content').addClass('hide');
        })
    </script>
</body>
</html>

注: jquery选择器和筛选器的使用
	jquery支持链式编程,可以一直.下去,可绕地球一圈.
3、模态对话框,暂时实现编辑，添加框，待再开发
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            text-align: center;
        }
        .hide {
            display: none;
        }
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #B9B9B9;
            z-index: 10;
        }
        .shadow {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
        .edit {
        }
    </style>
</head>
<body>
<a onclick="addElement();">添加</a>
<table border="1">
    <tr>
        <td class="c1">IP</td>
        <td>port</td>
        <td class="c1">操作</td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.1</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a>删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.2</td>
        <td target="port">443</td>
        <td>
            <a class="edit">编辑</a> | <a>删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.3</td>
        <td target="port">3306</td>
        <td>
            <a class="edit">编辑</a> | <a>删除</a>
        </td>
    </tr>
</table>
<div class="modal hide">
    <div>
        <input name="hostname" type="text"/>
        <input name="port" type="text"/>
    </div>
    <div>
        <input style="position: absolute;bottom: 20px;right: 20px;" type="button" value="取消" onclick="cancleModal();">
        <input style="position: absolute;bottom: 20px;left: 100px;" type="button" value="提交" onclick="commitFrom();">
    </div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>

    function addElement() {
        $('.modal,.shadow').removeClass('hide');
    }
    function cancleModal() {
        $('.modal,.shadow').addClass('hide');
        $('.modal input[type="text"]').val("");
    }
    $('.edit').click(function () {
        $('.modal,.shadow').removeClass('hide');

        var tds = $(this).parent().prevAll();

        tds.each(function () {
            var n = $(this).attr('target');
            var text = $(this).text();
            $('.modal input[name="' +n+ '"]').val(text);
        });
        
		// 下面这四行用上面四行代替，利用each()循环更好
        // var port = $(tds[0]).text();
        // var ip = $(tds[1]).text();
        // $('.modal input[name="IP"]').val(ip);
        // $('.modal input[name="port"]').val(port);
		// });
    });
</script>
</body>
</html>
4、模态对话框,暂时实现编辑、添加、删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            text-align: center;
        }

        .hide {
            display: none;
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #B9B9B9;
            z-index: 10;
        }

        .shadow {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

        .edit {

        }
    </style>
</head>
<body>
<a onclick="addElement();">添加</a>

<table border="1" id="tb">

    <tr>
        <td class="c1">IP</td>
        <td>port</td>
        <td class="c1">操作</td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.1</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.2</td>
        <td target="port">443</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.3</td>
        <td target="port">3306</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
</table>
<div class="modal hide">
    <div>
        <input name="hostname" type="text"/>
        <input name="port" type="text"/>
    </div>
    <div>
        <input style="position: absolute;bottom: 20px;right: 20px;" type="button" value="取消" onclick="cancleModal();">
        <input style="position: absolute;bottom: 20px;left: 100px;" type="button" value="提交" onclick="commitModal();">
    </div>
</div>
<div class="shadow hide"></div>

<script src="jquery-1.12.4.js"></script>
<script>
    function addElement() {
        // 添加按钮
        // $('.modal').removeClass('hide').next().removeClass('hide');
        $('.modal,.shadow').removeClass('hide');
    };
    function cancleModal() {
        // 编辑里面的取消按钮
        $('.modal,.shadow').addClass('hide');
        $('.modal input[type="text"]').val("");
    };
    $('.edit').click(function () {
        // 编辑按钮
        $('.modal,.shadow').removeClass('hide');

        var tds = $(this).parent().prevAll();

        tds.each(function () {
            var n = $(this).attr('target');
            var text = $(this).text();
            $('.modal input[name="' +n+ '"]').val(text);
        });
    });
    $('.del').click(function () {
        // 删除操作
        $(this).parent().parent().remove();
    });
    function commitModal() {
        // 提交按钮
        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        td1.innerHTML = "1.1.1.5";
        var td2 = document.createElement('td');
        td2.innerHTML = "8080";

        $(tr).append(td1);
        $(tr).append(td2);
        $('#tb').append(tr);

        $('.modal,.shadow').addClass('hide');
    }
</script>
</body>
</html>
5.1、购物网站商品详情、规格参数、累计评价、服务详情展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            height: 38px;
            background-color: #1E84E7;
            line-height: 38px;
        }
        .menu-item{
            float: left;
            border-right: 1px solid #ff755f;
            padding: 0 5px;
            cursor: pointer;
        }
        .hide{
            display: none;
        }
        .content{
            min-height: 50px;
            border: 1px solid #DBDBDB;
        }
        .active{
            background-color: #ff755f;
        }
    </style>
</head>
<body>
<div style="width: 700px; margin: 0 auto">
    <div class="menu">
        <div class="menu-item active" a="1">菜单一</div>
        <div class="menu-item" a="2">菜单二</div>
        <div class="menu-item" a="3">菜单三</div>
    </div>
    <div class="content">
        <div b="1">内容一</div>
        <div class="hide" b="2">内容二</div>
        <div class="hide" b="3">内容三</div>
    </div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
    $('.menu-item').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        var target = $(this).attr('a');
        $('.content').children("[b='" + target + "']").removeClass('hide').siblings().addClass('hide');
    })
</script>
</body>
</html>
5.2、同上面的小例子实现一样，下面通过索引实现，上面通过自定义属性实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            height: 38px;
            background-color: #1E84E7;
            line-height: 38px;
        }
        .menu-item{
            float: left;
            border-right: 1px solid #ff755f;
            padding: 0 5px;
            cursor: pointer;
        }
        .hide{
            display: none;
        }
        .content{
            min-height: 50px;
            border: 1px solid #DBDBDB;
        }
        .active{
            background-color: #ff755f;
        }
    </style>
</head>
<body>
<div style="width: 700px; margin: 0 auto">
    <div class="menu">
        <div class="menu-item active">菜单一</div>
        <div class="menu-item">菜单二</div>
        <div class="menu-item">菜单三</div>
    </div>
    <div class="content">
        <div>内容一</div>
        <div class="hide">内容二</div>
        <div class="hide">内容三</div>
    </div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
    $('.menu-item').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
    })
</script>
</body>
</html>
6、点赞之后出现一个+1,向右向上移动，同时透明度越来越小直至消失
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 40px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>

    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>

    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>

    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>

    <div style="color: #ffc070;"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            addHavor(this);
        });
        function addHavor(self) {
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','#ffc070');
            $(tag).css('position','absolute');
            $(tag).css('fontSize',fontSize + 'px');
            $(tag).css('top',top + 'px');
            $(tag).css('right',right + 'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 5;
                top = top - 5;
                right = right - 5;
                opacity = opacity - 0.1;

                $(tag).css('fontSize',fontSize + 'px');
                $(tag).css('top',top + 'px');
                $(tag).css('right',right + 'px');
                $(tag).css('opacity',opacity);

                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            },100);
        }
    </script>
</body>
</html>

利用setInterval(function{...},100)，计时器，每个100毫秒改变一次属性达到效果
7、回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="i1" style="position: fixed;right:40px; bottom:40px; opacity: 0.5" type="button" value="回到顶部">
    <div id="i2" style="height: 500px; width: 500px ;border: 1px solid #ff755f; overflow: auto">
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
    </div>
    <div style="height: 1000px;"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            $(window).scrollTop(0);
        })
    </script>
</body>
</html>
8.1、绑定事件,用于表单验证
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	// Dom的方式
    <a onclick="return clickOn()" href="https://www.zhihu.com">出来</a>
    <br>
    // jQuery的方式
    <a id="i1" href="https://www.zhihu.com">出来jQuery</a>
    <script>
        function clickOn() {
            alert('123');
            return false;
        }
    </script>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            alert(456);
            return false;
        });
    </script>        
</body>
</html>

注：
a标签默认有click绑定事件,如果自己再手动绑定一个事件,会先执行自定义的事件,
再执行默认事件,加上return false以后,就不会再执行默认事件了
8.2、提交信息时,没填写信息,不提交并给出提示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: #ff755f;
        }
    </style>
</head>
<body>
    <form id="f1" action="s4.html" method="POST">
    <div><input name="n1" type="text" /></div>
    <div><input name="n2" type="password" /></div>
    <div><input name="n3" type="text" /></div>
    <div><input name="n4" type="text" /></div>
    <div><input name="n5" type="text" /></div>

    <input type="submit" value="提交" />
    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {

            $('.error').remove();
            var flag = true;

            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                if(v.length <= 0){
                    flag = false;
                    var tag = document.createElement('span');
                    tag.className = "error";
                    tag.innerHTML = '必填';
                    $(this).after(tag);
                }
            });return flag;
        })
    </script>
</body>
</html>
中國颜值的半壁江山
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery项目案例
05-12
Jquery案例，里面有图片的自动切换，留言板，编辑框，都是用Jquery技术开发的，代码清晰，
Web前端JQuery入门实战案例
weixin_33722405的博客
02-24 542
前端jquery入门到实战 为什么要学习Jquery?因为生活。 案例： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset = "UTF-8"> <title>dashu</title> <style> div { height:...
值得 Web 开发人员学习的20个 jQuery 实例教程
weixin_34279579的博客
01-07 116
　　这篇文章挑选了20个优秀的 jQuery 实例教程，这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平。其中，既有网站中常用功能的的解决方案，也有极具吸引力的亮点功能的实现方法，相信通过对这些教程的学习能够带给您很大的收获。 您可能感兴趣的相关文章 精心推荐几款极好的 JavaScript 文件上传插件 精心推荐几款白富美型 jQuery 图片轮播插件 精心推荐几款...
jquery项目案例_web前端项目实战旅行社网【12】
weixin_28956763的博客
12-06 271
本章主要开始如果通过第一个 PC 端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．整体设计首先，我们要了解一下测试工具。这里提供两种测试工具，一种是 Chrome 自带的移动端测试工具，另一种是 Opera Mobile 移动端测试工具。这里主要以 Chrome 为准，他模拟了主流的手机，并且引擎是 webkit。首先，我们介绍一下分辨率，通过 Chrome 移动...
JQuery基础-》带有案例-隔行换色-全选-QQ表情-下拉框左右移动
Joker的博客
10-18 201
JQuery基础 下面案例用到的资源包： 1.内容 1. JQuery 基础： 1. 概念 2. 快速入门 3. JQuery对象和JS对象区别与转换 4. 选择器 5. DOM操作 6. 案例 2.JQuery概念 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaS...
jQuery 在网页上显示日期时间（Clock）的小例子
05-01
内容索引:脚本资源,jQuery,JS日历,jQuery...通过这个实例你将了解到jquery.jclock.js的用法，除实例的调用方法外，本插件还可以完成更多的时间显示，让你在调用jQuery的其它功能时，顺便显示时间，如果你有需要的话。
三个基于jQuery的JS复选框全选反选例子
05-12
摘要:脚本资源,jQuery,全选,反选　三个基于jQuery的JS复选框全选反选例子，实用的网页特效，三款例子大同小异。所有checkbox跟着全选的checkbox走，定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，...
jQuery布局组件EasyUI Layout使用方法详解
01-19
layout 布局组件，依赖于panel，自己开发个web小程序的时候直接用这个组件布局很方便。 对于一个web程序原来说，特别是像我这种一遇到界面美化问题就找美工的程序员，想自己独立的开发一个东西，除了套用以前的项目...
JavaScript用JQuery呼叫Server端方法示例代码
12-30
准备好Server端的方法 [System.Web.Services.WebMethod] public static string VeryUserName(string name) { string rtn = 恭喜，此帐号还没有注册，你可以使用。; if (name == ) rtn = 请填写一个注册帐号。; if ...
JQuery EasyUI实例+学习笔记
05-01
是不同阶段的笔记，对功能有所优化和扩展，扩展Editors的datetimebox方法，具体的菜单事件请自行添加，跟toolbar的方法是基本一样的，将form表单内的元素序列化为对象，扩展Jquery的一个方法。示例里的注释是相当...
《jQueryWeb开发案例教程（在线实训版）》案例源码.zip
06-29
《jQueryWeb开发案例教程（在线实训版）》案例源码.zip
jquery项目
05-05
比较实用的jquery项目，打开即能运行
JQuery项目
10-16
jQuery项目实例开发，案例齐全，全面 对你肯定有很大帮助！
JQuery实例大全
11-14
非常不错的资源，几乎包含了目前网络上的所有JQuery特效
《JQuery实战]》实例源码
03-23
《JQuery实战]》实例源码 是本人在学习过程中所实现的效果实例代码 服务器端的代码是基于asp.net
Web------jquery的小案例
qq_44241861的博客
02-18 260
文章目录一、jQuery介绍二、jQuery基本语法三、 应用案例 一、jQuery介绍 1、简介 jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 之前的js代码和HTML是写在一起的，现在可以把js代码独立出来，创建一个js目录，里面用来放单独的js代码，然后在H...
Web 前端学习 之jQuery 案例(表单表格增删)
Weary_PJ的博客
08-04 487
Web 前端学习 之jQuery 案例(表单表格增删) 实现目标 首先来看一下要实现的目标效果 看似是一个很基本的操作,但是要考虑的细节还是比较多的,本次案例仅仅使用jq来完成,在项目中还需要结合后端,但是本质类似 页面源代码 html <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Untitled Document</tit
JQuery8：实战案例
尹成的技术博客
11-14 650
#简介 公钥基础设施(Public Key Infrastructure)是为了能够更有效地运用公钥而制定的一系列规范和规格的总称，一般根据其英语缩写而简称PKI。PKI只是一个总称，而并非指某一个单独的规范和规则。例如，RSA公司制定的公钥密码规范就是PKI的一种。 #PKI组成要素 用户：使用PKI的人 认证机构：颁发证书的人 仓库：保存证书的数据库 说明：PKI中用户和认证机构不仅局限于“人...
java前端开发jquery_web前端开发JQuery常用实例代码片段(50个)
weixin_29006187的博客
03-02 451
本文给大家展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成。这些都是我尽量记住的有着最佳性能的代码段，因此如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中！我希望你在这一文章中能找到有帮助的东西。1. 如何创建嵌套的过滤...
aspx使用ajax传值给cs,Jquery Ajax调用aspx页面方法
最新发布
05-25
要使用 ASPX 页面提供的 Web 方法，您需要在 ASPX 页面中添加一个 Web 方法，并在客户端使用 AJAX 调用该方法。下面是一个简单的示例： 首先，在 ASPX 页面中添加一个 Web 方法： ```csharp [System.Web.Services....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值