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. 线程 task pritce

    1.使用task类创建并执行简单任务: 使用task的构造函数来创建 任务,并调用start方法来启动任务,执行异步操作 aitAll用于等待提供的所有 System.Threading.Tasks. ...

  2. webpack-dev-middleware插件的使用

    我们在使用webpack 编译文件时,每次改动文件都要去重新编译,是不是很麻烦,这时候我们就用到了webpack-dev-middleware 插件,该插件对更改的文件进行监控,编译, 一般和 web ...

  3. 配置SSIS 包部署

    包配置是干嘛滴! 使用包配置可以从开发环境的外部设置运行时属性和变量.         把用户变量转换成Config文件 步骤: 准备工作 把第一个例子中的userinfo.txt复制两份,放到同一个 ...

  4. cudaMalloc和cudaMallocPitch

    原文链接 偶有兴趣测试了一下题目中提到的这两个函数,为了满足对齐访问数据,咱们平时可能会用到cudamallocPitch,以为它会带来更高的效率.呵呵,这里给出一段测试程序,大家可以在自己的机器上跑 ...

  5. 多线程， Thread类，Runnable接口

    多线程 线程:线程是进程中的一个执行单元,负责当前进程中程序的执行,一个进程中至少有一个线程.一个进程中是可以有多个线程的,这个应用程序也可以称之为多线程程序. 单线程程序:即,若有多个任务只能依次执 ...

  6. zip压缩工具，unzip解压缩工具

    zip压缩工具,unzip解压缩工具=================== [root@aminglinux tmp]# yum install -y zip[root@aminglinux tmp] ...

  7. Windows Server 2012 搭建DHCP及远程路由访问

    1.1    基础环境信息 1.2    DHCP与远程访问服务器角色安装 1.服务器管理器—>仪表板—>添加角色和功能,出现添加角色和功能向导,点击下一步 2.选择安装类型为基于角色或基 ...

  8. Pagehelper介绍

    本文引自:https://my.oschina.net/zudajun/blog/745232 摘要: com.github.pagehelper.PageHelper是一款好用的开源免费的Mybat ...

  9. C语言函数篇（四）函数的设计

    1. 函数设计的时候,如果使用到全局变量,就尽量通过参数的形式传递进来 也就是说,保持 函数 跟 外部的交互 只有 参数 和 返回值 2. 在有参数的情况下,或者有数值输入的时候,要先进行错误判断. ...

  10. 第三章 文件 I/O

    3.1 引言 先说明可用的文件 I/O 函数:open.read.write.close,然后说明不同缓冲区长度对read和write函数的影响. 本章所说的函数经常被称为不带缓冲的 I/O (unb ...