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. scrapy Pipeline 练习

    class WeatherPipeline(object): def process_item(self, item, spider): print(item) return item #插入到red ...

  2. Real VNC软件

    RealVNC5.2.3+key http://yunpan.cn/cjchAkeIgEAPG (提取码:4092)

  3. python之字典的书写

    python之字典 1.字典的说明定义:字典是另一种可变容器模型,且可存储任意类型对象,他是由key:value键值对组成的. 2.字典的代码2.1.字典的定义 >>> a = di ...

  4. centOS初了解--***安装node

    在***买了一个VPS,用了差不多一年了,除了做FQ使用之外,同时也下载了一个node,用了express搭建了一个服务,同时我在博客园有博客,我也懒得转来转去了,直接做了一个重定向,跳转到了博客园. ...

  5. Linux下Mysql5.6 二进制安装

    1.1下载二进制安装包 wget https://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.40-linux-glibc2.12-x86_64.t ...

  6. 【shell脚本学习-1】

    Shell学习笔记 简介: Shell 是一个用C语言编写的程序,它是用户使用Linux的桥梁.Shell既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个 ...

  7. ethereum(以太坊)(八)--Address

    pragma solidity ^0.4.0; contract Test{ address _owner; uint160 _c; constructor() public{ _owner = 0x ...

  8. 深入理解yii2之RBAC(模块化系统)

    一.前言 上一篇文章我们已经大致谈过RBAC到底是什么和yii2底层RBAC接口的分析. 下面我深入理解一下RBAC权限分配,深入理解下yii2底层RBAC扩展,以及它是如何针对模块化系统的开发的? ...

  9. 中缀表达式转后缀表达式（Python实现）

    中缀表达式转后缀表达式 中缀表达式转后缀表达式的规则: 1.遇到操作数,直接输出: 2.栈为空时,遇到运算符,入栈: 3.遇到左括号,将其入栈: 4.遇到右括号,执行出栈操作,并将出栈的元素输出,直到 ...

  10. linux学习（3）——vim文本编辑工具

    (三) vi与vim的最大区别就是编辑一个文本vi不显示颜色,vim显示颜色. 安装: yum install -y vim-enhance Vim有三种模式 A:一般模式 上下左右光标 k j h ...