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. Mybatis-generator自动生成

    第一步:导入架包 <build> <plugins> <plugin> <groupId>org.mybatis.generator</group ...

  2. P1242 新汉诺塔（hanio）

    这道题加深了hanio的理解 如果我们要移动第n个盘子.那么就是说,n+1以后(包括n+1)的盘子都已经到位了 #include<iostream> #include<cstdio& ...

  3. apache日志

    <VirtualHost *:80> ServerAdmin chinasir.xyz@gmail.com DocumentRoot /var/www/html/baidu ServerN ...

  4. django模板层之静态文件引入优化

    1.新手使用 我们一般在初学django的情况下,引入django的静态文件一般有如下两种方式: 通过路径引用: <script type="text/javascript" ...

  5. ssh框架复习

    1.Hibernate中实体类的创建规则是什么? 2.hibernate中实体类的三种状态? 三种状态: 1. new 出来一个新对象 TakeTime takeTime = new TakeTime ...

  6. 变量类型 ROWID 和 UROWID

    ROWID:    ROWID为该表行的唯一标识,是一个伪列,这个伪列可以用SELECT查看,但是不可以用INSERT, UPDATE来修改,不可以用DELETE来删除. UROWID: ROWID可 ...

  7. 局域网内使用ssh连接两台计算机总结

    因为家里有两台电脑,一个centos7 系统,一个Mac,都是笔记本,感觉两个拿来拿去的用太麻烦了,所以就想用ssh连接cenots7 的电脑,这样就没那么麻烦了.欢迎大家指正 配置静态ip cent ...

  8. ethereum(以太坊)(九)--global(全局函数)

    pragma solidity ^0.4.0; contract modifierTest{ bytes32 public blockhash; address public coinbase; ui ...

  9. ethereum(以太坊)(五)--Bool

    pragma solidity ^0.4.0; contract Bool{ uint num1 = 100; uint num2 = 200; bool _c = true; // &&am ...

  10. 腾讯首页分辨手机端与pc端代码

    腾讯首页分辨手机端与pc端代码 自己在做网页的时候在腾讯网首页借鉴的代码. 代码: <!-- 移动适配JS脚本 --> <script type="text/javascr ...