jQuery 基础学习

jQuery

可以按照网站进行查看

http://jquery.cuishifeng.cn/

jQuery

模块《=》类库

DOM/BOM/JavaScript的类库

一查找元素

jQuery:

选择版本

1.0

2.0

3.0

可以选择1.0最新版本兼容性比较好 IE 线上环境选择压缩版本

1.1 引入jQuery

一般放在html末尾

<script src="jquery-2.1.4.min.js"></script>

调用jQuery
jQuery == $  一般写$

1.2 jQuery转换：

DOM对象与jQuery对象转换

jquery对象[0] => Dom对象

Dom对象 ==> $(Dom对象)

1.3 选择器

直接找到某个或者某类标签

.id

  $('#id')

.class

 <div class='c1'></div>

 $('.c1')

 标签

<div id="" class='c1'>

            <a>f</a>

            <a>f</a>

        </div>

        <div class='c1'>

            <a>f</a>

        </div>

        <div class='c1'>

            <div class='c2'> </div>

        </div>

  $('a')
如果

筛选

二操作元素

===》实例:

基本选择器

筛选器

案例

用到的知识

基本选择器及筛选器

<!DOCTYPE html>

<html lang="en">

<head>

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

    <meta charset="UTF-8">

    <title>Title</title>

</head>

    <style>

        .menu{

            float: left;width: 10%;height: 500px;background-color: aqua

        }

        .content {

            float: left;width: 90%;height: 500px;background-color: darkolivegreen;

        }

        .title{

            background-color: black;

            color: white;

            height: 50px;

            line-height: 50px;

        }

        .hide{

            display: none;

        }

    </style>

<body>

        <div>

        <div class="menu">

            <div class="item">

                <div class="title" onclick="Func(this);">菜单一</div>

                <div class="body ">

                    <div>1.1</div>

                    <div>1.2</div>

                    <div>1.3</div>

                </div>

            </div>

            <div class="item">

                <div class="title" onclick="Func(this);">菜单二</div>

                    <div class="body hide">

                        <div>2.1</div>

                        <div>2.2</div>

                        <div>2.3</div>

                     </div>

            </div>

            <div class="item">

                <div class="title" onclick="Func(this);">菜单三</div>

                <div class="body hide">

                    <div>3.1</div>

                    <div>3.2</div>

                    <div>3.3</div>

                </div>

            </div>

            </div>

        <div class="content">

        </div>

        </div>

<script>

    function Func(ths) {

        $(ths).next().removeClass('hide');

        $(ths).parent().siblings().find('.body').addClass('hide');

    }

</script>

</body>

</html>

左侧菜单

属性

attr：

可以适用与所有的标签，初了checkbox，radios

案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style>

        .tab-box .box-menu{

            background-color: #dddddd;

            border: 1px solid #dddddd;

            line-height: 33px;

        }

        .box-menu a{

        }

        .tab-box .box-body{

            border: 1px solid #dddddd;

        }

        .hide {

            display: none;

        }

        .current{

            background-color: red;

            color: white;

        }

    </style>

</head>

<body>

        <div class="tab-box">

            <div class="box-menu">

                <!--所有菜单-->

                <a alex="c1" onclick="ChangeTab(this)" class="current">菜单一</a>

                <a alex="c2" onclick="ChangeTab(this)">菜单二</a>

                <a alex="c3" onclick="ChangeTab(this)">菜单三</a>

            </div>

            <div class="box-body">

                <!--所有内容-->

                <div id="c1">内容一</div>

                <div id="c2" class="hide">内容二</div>

                <div id="c3" class="hide">内容三</div>

            </div>

        </div>

<script>

    function  ChangeTab(ths){

        $(ths).addClass('current').siblings().removeClass('current')

        //获取当前点击的标签

        var contentId = $(ths).attr('alex')

        //$('#c1')

        var temp = "#" + contentId;

        $(temp).removeClass('hide').siblings().addClass('hide');

        //获取当前标签的属性

        //值$('#xx')显示，其它兄弟隐藏

    }

</script>

</body>

</html>

Tab菜单

checkbox属性

$('').prop('checked',true) 选上

$('').prop('checked',false) 取消

案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input  id="c1" type="checkbox" />

    <input id="c3" type="checkbox" checked="checked">

    <div>

        <input type="button" value="全选" onclick="SelectAll()" />

        <input type="button" value="取消" onclick="ClearAll()" />

    </div>

    <div>

        <table border="1">

            <tr>

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

                <td>123</td>

            </tr>

            <tr>

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

                <td>123</td>

            </tr>

            <tr>

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

                <td>123</td>

            </tr>

        </table>

    </div>

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

<script>

    function SelectAll() {

        //table标签中的所有input

        //$('table:checkbox') 找到了所有的input,checkbox

        $('table :checkbox').prop('checked',true);

    }

    function ClearAll() {

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

    }

</script>

</body>

</html>

checkbox 全选取消

for循环

案例：

 function ReverseAll() {

        //i 下标索引

        //item 循环元素

        var userList = [,,,]

        $.each(userList,function (i,item) {

            console.log(i,item)

        });

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input  id="c1" type="checkbox" />

    <input id="c3" type="checkbox" checked="checked">

    <div>

        <input type="button" value="全选" onclick="SelectAll()" />

        <input type="button" value="取消" onclick="ClearAll()" />

        <input type="button" value="反选" onclick="ReverseAll()" />

    </div>

    <div>

        <table border="1">

            <tr>

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

                <td>123</td>

            </tr>

            <tr>

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

                <td>123</td>

            </tr>

            <tr>

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

                <td>123</td>

            </tr>

            <tr>

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

                <td>123</td>

            </tr>

        </table>

    </div>

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

<script>

    function SelectAll() {

        //table标签中的所有input

        //$('table:checkbox') 找到了所有的input,checkbox

        $('table :checkbox').prop('checked',true);

    }

    function ClearAll() {

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

    }

    function ReverseAll() {

        $('table :checkbox').each(function () {

            //每一个循环都执行该方法体

            //$(this)表示当前循环的元素

            var isChecked = $(this).prop('checked');

            if (isChecked){

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

            }else {

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

            }

        })

    }

</script>

</body>

</html>

checkbox反选

jQuery 基础学习的更多相关文章

JQuery基础学习总结
JQuery基础学习总结简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
【jQuery基础学习】09 jQuery与前端（这章很水）
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构文件结构前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
jQuery 基础学习笔记总结（一）
Jquery 学习笔记总结感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...
【jQuery基础学习】12 jQuery学习感想
学习完<锋利的jQuery>,用时13天. 这期间,私底下又用了一点时间去W3C上把HTML和CSS重新过了一遍. 总的来说,收获还是蛮多的. 其实在本书里面真正重要的也就前几章,后面的都 ...
【jQuery基础学习】08 编写自定义jQuery插件
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...
【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器语法描述示例标签选择器 E { ...
jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
【总结整理】JQuery基础学习---动画
jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

随机推荐

2190: [SDOI2008]仪仗队(欧拉函数)
2190: [SDOI2008]仪仗队 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 3235 Solved: 2089 Description 作 ...
IOS开发学习笔记027-UITableView 使用模型对象
1.模型对象 2.单组数据的显示 1.模型对象继续优化上一个程序上一次用到字典,但是坏处多多.这里将这些数据封装到类中. 这就是MVC中得模型,模型就是数据的显示结构新建一个类,添加几个属性和一 ...
openpyxl模块介绍
openpyxl模块是一个读写Excel 2010文档的Python库,如果要处理更早格式的Excel文档,需要用到额外的库,openpyxl是一个比较综合的工具,能够同时读取和修改Excel文档.其 ...
06 JVM 是如何处理异常的
在 JAVA 中,异常处理的方式主要是抛出异常和捕获异常.这两大要素共同实现程序控制流的非正常转移. 抛出异常可以分为显示和隐式两种.显示抛出异常的主体是应用程序,它指的是在程序中使用 throw 关 ...
sqlserver 取时间段重复或者不重复的数据
declare @str datetime, @end datetime select @str='2013-04-05',@end='2013-04-10'select * from arp_hbs ...
Ant 概念
Ant的概念可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道make这个命令.当编译Linux内核及一些软件的源程序时,经常要用这个命令.Make命令其实 ...
CLion 使用笔记（三）
我已经在博客里面发布了好几篇 CLion 使用笔记了,没追究这是第几篇,姑且算作第三篇. 我的 CLion 是搭配了 MSYS2 和 Conan 使用的.MSYS2 提供 C++ toolchain. ...
loj 300 [CTSC2017]吉夫特【Lucas定理 + 子集dp】
题目链接 loj300 题解 orz litble 膜完题解后,突然有一个简单的想法: 考虑到$2$是质数,考虑Lucas定理: \[{n \choose m} = \prod_{i = 1} { ...
codechef May Challenge 2016 FORESTGA: Forest Gathering 二分
Description All submissions for this problem are available. Read problems statements in Mandarin Chi ...
kubernetes-dashboard
1.导入kubernetes-dashboard 镜像 [root@node1 DNS]# docker load < kube-dashboard.tar 6bc90c4dba69: Load ...

jQuery 基础学习

jQuery 基础学习的更多相关文章

随机推荐

热门专题