1、正反选实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1">

    <button onclick="selectall();">全选</button>

    <button onclick="canselall();">取消</button>

    <button onclick="reverseall();">反选</button>

    <tr>

        <td><input type="checkbox" value="444"></td>

        <td>11111</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>11111</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>11111</td>

    </tr>

</table>

<script src="jquery-3.1.1.js"></script>

<script>

    function selectall() {

//       var abc1= $('table []');

//        console.log(abc1);

       $('table :checkbox').prop('checked',true);//找到table标签下面的style为checkbox的input标签，注意留空格

//        var abc1=$('table :checkbox').prop('value');

//        console.log(abc1);

    }

    function canselall() {

        $('table :checkbox').prop('checked',false)

    }

    function reverseall() {

        $('table :checkbox').each(   //each表示juuery里面的循环，这里循环table标签下面的style为checkbox的input标签

                // 的this表示一个个循环的元素

                function () {

                    if($(this).prop('checked')){

                        $(this).prop('checked',false)

                    }else{

                        $(this).prop('checked',true)

                    }

                }

        )

    }

</script>

</body>

</html>

　　jquery里面另外的一种循环方式，

    li=[11,22,33,55];

$.each(li,function (x,y) {

console.log(x,y)

});//这是循环的另外一种方式

　　效果如图

2、全选反选框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1{background-color: aquamarine;

            height: 3000px}

        .div3{

            width: 60px;

            height:60px;

            position: fixed;

            background-color: blue;

            right: 1px;

            bottom: 10px;

            font-size: 23px;

        }

        .hide{

            display:none;

        }

    </style>

</head>

<body>

<div class="div1">111</div>

<div class="div2">111</div>

<div class="div3 hide" onclick="returnTop();">返回顶部</div>

<script src="jquery-3.1.1.js"></script>

<script>

    window.onscroll=function () {      //window.onscroll表示监听滚轮

        var  index = $(window).scrollTop();//每当移动滚轮则捕获离顶部的高度

//        console.log(index);

        if(index>50){//当距离大于50时候才显示这个返回顶部的小框框

            $('.div3').removeClass('hide')

        }else {$('.div3').addClass('hide')}

    };

    function returnTop() {

        $(window).scrollTop(0)

    }

</script>

</body>

</html>

　　3、绑定事件基础处理

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="c1" style="background-color: blue">

    <p>hello</p>

</div>

<script src="jquery-3.1.1.js"></script>

<script>

$('#c1').append('<b>aaaa</b>');//往后插入元素,prepend表示往前面插入数据，不过都是内部插入，即插入div内部

$('<b>uuuu</b>').insertAfter('#c1');//这是外部插入

$('ul').delegate('li','click',function () {

    alert('123')

});//绑定事件给标签li，每添加一条li就就自动绑定事件

    $('button').click(function(){

    })

</script>

</body>

</html

　　4、插入标签

$('#c1').append('<b>aaaa</b>');//往后插入元素,prepend表示往前面插入数据，不过都是内部插入，即插入div内部

$('<b>uuuu</b>').insertAfter('#c1');//这是外部插入

　　详细如图

5、扩展

<script>

$(function () {

    jQuery.fn.extend(

            {

                hello:function(){

                    return $(this).text();//内部实际是一个for循环，取到所有的text文本

                }

            }

    );

    var index =$('.title').hello();

    console.log(this);

    alert(index)

});

jQuery.extend({//另外一种扩展

    s1:function (arg) {

        $(arg)

    }

});

$.s1('.title');

$('.title').hello()

</script>

　　

6、最后概括起来，jquery的基本用法结构

一、查找
选择器
基本选择器
id、class、tag
层级：div a .c1
组合：div，a .c1
属性：$("div[jay='abc']")
筛选器
父亲
孩子
兄弟
哥哥们
弟弟们
子子孙孙：

二、操作
整体标签：
属性：
内容
三、事件
xxxx.click
xxxx.blind('click')
xxxx.delegate('li','click',func)

四、扩展

五、ajax

jquery实现各种实例的更多相关文章

  1. 经典实用jQuery soChange幻灯片实例演示

    soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...

  2. 下拉菜单;手风琴;九宫格的Jquery的使用实例

    下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 代码如下: <!DOCTYPE html> <html lang="en"> & ...

  3. Struts2+JQuery+Json登陆实例

    Struts2+JQuery+Json登陆实例 博客分类: Struts2   在搭建之前.. 首先,需要准备struts2.0框架的5个核心包, 以及jsonplugin-0.32.jar 以及js ...

  4. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  5. jquery简介和实例

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...

  6. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  7. JQuery插件开发简单实例

    经常使用Jquery的各种插件,却对如何开发插件一无所知,以为是一件很麻烦的事儿?其实不然,下面通过一个简单的实例,来看一下Jquery Plugin的开发. 先看DEMO:动画菜单 不用插件如何实现 ...

  8. Jquery焦点图实例

    对于很多建站的朋友来讲,焦点图并不陌生,一般的企业站,门户站都会用到焦点图.我们平时在写html代码的时候,很多人为了省时省力,对于焦点图都是在网上下载一些人家写好的代码,直接套上去即可,很多时候我自 ...

  9. jQuery基础与实例

    一.简介 1.什么是jQuery jQuery是一个轻量级.快速简洁的javaScript库,能让我们方便快捷的选择元素操作元素属性. 2.下载地址 3.jQuery使用方式 $("div& ...

  10. Jquery 使用JSOPN实例

    1.说明 dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的jsonp ...

随机推荐

  1. python_3_coding

    # -*- coding:utf-8 -*- 也可以换成下划线 用于声明文件编码,python3本身就是utf-8类型,不用声明 name="你好,世界"#utf-8格式能显示汉字 ...

  2. Advanced Memory Allocation 内存分配进阶［转］

    May 01, 2003  By Gianluca Insolvibile  in Embedded Software Call some useful fuctions of the GNU C l ...

  3. cnn中的fp和bp推导

    昨天下午在单位从新推导了一遍fp和bp. 在整个网络的训练中,最关键的就是计算残差. 最后一层残差很容易,那么前面每一层的残差怎么计算呢? 总体来说,有多少权重就需要多少残差项来进行权重更新.每个权重 ...

  4. 关于package.json学习

    1.如果要下载npm包,必须有package.json文件,不然会报错,如果缺少必要字符报错,参考报错信息 2.license,指定用户权限,可以不写,不会报错 3.devDependencies,依 ...

  5. docker-compose 构建mongodb并导入基础数据示例

    使用docker-compose构建mongodb服务并导入基础数据示例. 1.文件目录结构 ——mongo/ |——docker-compose.yml |——mongo-Dockerfile |— ...

  6. python核心编程2 第六章 练习

    6-2. 字符串标识符.修改例 6-1 的 idcheck.py 脚本,使之可以检测长度为一的标识符,并且可以识别 Python 关键字,对后一个要求,你可以使用 keyword 模块(特别是 key ...

  7. python--Matplotlib(一)

    基础知识薄弱的同学可以看看一下博客 https://www.cnblogs.com/dev-liu/p/pandas_plt_basic.html https://blog.csdn.net/Notz ...

  8. Windows下安装Python数据库模块--MySQLdb

    ## 1.下载MySQLdb [去官网](http://pypi.python.org/pypi/MySQL-python/) 下载对应的编译好的版本(现在官网最新版本为1.2.5): MySQL-p ...

  9. C++基础 new和delete

    1.new delete 的使用 (1)基本数据类型 ); delete p; int *p = (int *)malloc(sizeof(int)); *p = ;free(p); (2)数组 ]; ...

  10. ZOJ3553 概率DP

    Bloodsucker In 0th day, there are n-1 people and 1 bloodsucker. Every day, two and only two of them ...