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. test image

    Most of these images are in PBM or PGM format and compressed with GNU Zip and GNU TAR Note: These pa ...

  2. mayan 游戏真是毒瘤

    如题 真坑呀!!! 可算过了 我率先达到了氧气富有化 先是改变时没有fall.40分 然后是fall函数写慢了 tle 50分 . 上代码 #include<cstdio> #includ ...

  3. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  4. 1、SpringBoot+MybatisPlus整合

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  5. Java +安卓 定时任务

    1.android 自带闹钟定时任务 安卓闹钟可以配合广播来实现(不推荐),系统资源浪费,安卓系统在5.0以后的定时 任务貌似触发时间不准了,因为了为了省电. //获取系统闹钟 AlarmManage ...

  6. 使用winsw将spring-boot jar包注册成windows服务

    背景:最近的项目中使用spring-boot, https://github.com/kohsuke/winsw/releases <service> <id>YJPSS< ...

  7. pdo->prepare 返回false的问题总结

    报错信息: Fatal error: Call to a member function execute() on a non-object 一般是pdo->prepare 返回了false导致 ...

  8. Java分享笔记：泛型类的定义与使用

    当类中要操作的引用数据类型不确定时,可以定义泛型类完成扩展.下面是程序演示. package packB; class Student { //定义学生类 public String st = &qu ...

  9. ES6笔记02-箭头函数

    eg1:// ES5 匿名函数 var total = values.reduce(function (a, b) { return a + b; }, 0); // ES6 匿名函数 var tot ...

  10. git分布式版本控制系统常用的操作

    Git是一个版本控制系统,用来追踪计算机文件的变化的工具,也是一个供多人使用的协同工具.它是一个分布式的版本控制系统,本文将简单介绍如何使用.简单来说,就是你要和你的伙伴一起完成一项任务,但是你们要互 ...