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

随机推荐

3282: Tree（LCT）
3282: Tree Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 2249 Solved: 1042[Submit][Status][Discus ...
logback mybatis 打印sql语句
logbac.xml 文件的基础配置参考的园友的 http://www.cnblogs.com/yuanermen/archive/2012/02/13/2349609.html 然后hibernat ...
Intellij IDEA快捷键大全
Intellij IDEA快捷键大全 Intellij IDEA这个工具有些方面确实比较优秀,使用了一段时间的IntelliJ IDEA,感觉这个JAVA IDE非常好用!比如javascript自动 ...
linux环境搭建系列之svn安装
前提: linux centOS 64位操作系统 1.root账号 2.#yum install -y subversion 出现如下报错: 尝试Telnet https://www.baidu.co ...
MD5碰撞
if ( $_POST['param1'] !==$_POST['param2'] && md5($_POST['param1']) === md5($_POST['param2']) ...
MySQL Innodb表导致死锁日志情况分析与归纳
发现当备份表格的sql语句与删除该表部分数据的sql语句同时运行时,mysql会检测出死锁,并打印出日志案例描述在定时脚本运行过程中,发现当备份表格的sql语句与删除该表部分数据的sql语句同时 ...
Log4j官方文档翻译(一、基本介绍)
简介 log4j是使用java语言编写的可靠的.快速的.灵活的日志框架,它是基于Apache的license. log4j支持c,c++,c#,perl,python,ruby等语言.在运行时通过额外 ...
抓取js动态生成数据
最近在抓数据,一般的网页数据抓取相对容易一些,今天在抓电视猫的节目单,发现有些数据时抓取不到的,Java端得到的HTML文件里面没有某一段代码,查了很多资料,发现说是js动态生成的数据,无法直接抓取, ...
BZOJ 3771 Triple ——FFT
直接暴力卷积+统计就可以了. 去重比较复杂. 其实也不复杂,抄吧! 反正AC了. #include <map> #include <cmath> #include <qu ...
挖煤（coal）
挖煤(coal) solution 我好弱,啥也想不到. 想了很久dp,这有后效性啊. 结果倒着做就可以了,因为后面的不会影响前面的. 考虑前面的影响后面:挖煤相当于让后面所有a[I]*(1+k%) ...

jQuery 基础学习

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

随机推荐

热门专题