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

随机推荐

Redis实现之复制（二）
PSYNC命令的实现在Redis实现之复制(一)这一章中,我们介绍了PSYNC命令和它的工作机制,但一直没有说明PSYNC命令的参数以及返回值.现在,我们了解了运行ID.复制偏移量.复制积压缓冲区以 ...
解决maven项目Invalid bound statement (not found)的方法
用IDEA 做的ssm 的maven项目,登陆时出现上图问题. 原因是它读取不到DevUserMapper.xml文件和取它xml文件,后面查询在编译好的文件中,xml文件并没有引入进来,这就是导致出 ...
Java EnumSet工作原理初窥
EnumSet是Java枚举类型的泛型容器,Java既然有了SortedSet.TreeSet.HashSet等容器,为何还要多一个EnumSet<T>呢?答案肯定是EnumSet有一定的 ...
linux环境搭建系列之memcached安装步骤
1.从官网在线下载最新的安装包 wget http://memcached.org/downloads/memcached-1.4.34.tar.gz 该命令为在线下载注意:最新的地址会变动,所以最 ...
python学习之dictionary函数的用法
编写下面这段代码运行出现了报错.#!/usr/bin/env python2.7#-*-coding:utf-8 -*- d=['T']a=raw_input('请输入a的值')if a in d : ...
9.Iptables与Firewalld防火墙
第9章 Iptables与Firewalld防火墙章节简述: 保障数据的安全性是继保障数据的可用性之后最为重要的一项工作.防火墙作为公网与内网之间的保护屏障,在保障数据的安全性方面起着至关重要的作用 ...
CMD 下运行python的unittest测试脚本无输出
正常情况下windows的命令行执行python脚本命令: python 脚本名.py 我这样做了,看截图可以看到,并没有期待中那样有一堆高大上的信息输出,反而毛都没有!!!! 于是,我想起了度娘,但 ...
[python][django学习篇][14]markdown 代码高亮
1 修改detail视图函数,渲染文件的时候,增加codehight拓展 post.body = markdown.markdown(post.body, extensions=[ 'markdown ...
【转】Unity摄像机的使用二：摄像机的切换
http://blog.csdn.net/liujunjie612/article/details/45847877 我们接着上一篇博文继续研究摄像机,这篇我们说下Unity中摄像机的切换,说到切换, ...
BZOJ 1855： [Scoi2010]股票交易（DP+单调队列）
1855: [Scoi2010]股票交易 Description 最近lxhgww又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,lxhgww预测到了未 ...

jQuery 基础学习

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

随机推荐

热门专题