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

随机推荐

ogre3D学习基础4 -- 网格工具与硬件缓存
三.网格工具(Mesh) 1.导出器(Exporters)--- 用于从模型生成器中得到数据并且导入到OGRE中去. 导出器是指通过3D模型工具的插件写成网格数据和骨骼动画的文件格式可以在OGRE中被 ...
Leetcode 554.砖墙
砖墙你的面前有一堵方形的.由多行砖块组成的砖墙. 这些砖块高度相同但是宽度不同.你现在要画一条自顶向下的.穿过最少砖块的垂线. 砖墙由行的列表表示. 每一行都是一个代表从左至右每块砖的宽度的整数列表 ...
[转]手写数字识别错误NameError: name 'mnist' is not defined
转自:https://blog.csdn.net/coder_Gray/article/details/78562382 在Tensorflow上进行mnist数字识别实例时,出现如下错误 NameE ...
Excel的数据批量替换
该篇文章照抄自:http://www.cnblogs.com/xwgli/p/5845317.html 在 Excel 中使用正则表达式进行查找与替换在 Excel 中,使用 Alt+F11 快捷 ...
Python+NLTK自然语言处理学习（一）：环境搭建
Python+NLTK自然语言处理学习(一):环境搭建参考黄聪的博客地址:http://www.cnblogs.com/huangcong/archive/2011/08/29/2157437.ht ...
Lyft Level 5 Challenge 2018-Final Round(Open Div.2) B. Taxi drivers and Lyft
http://codeforces.com/contest/1075/problem/B Palo Alto is an unusual city because it is an endless c ...
http的一些知识
TCP/IP协议分层应用层 TFP DNS DNS域名解析的过程在浏览器DNS缓存中搜索读取系统的hosts文件,查找其中是否有对应的ip 向本地配置的首选DNS服务器发起域名解析请求 HTTP ...
JavaScript 笔记(1) -- 基础 & 函数 & 循环 & ...
目录(代码编写): 显示数据语法变量 & 变量类型对象函数事件字符串运算符条件语句循环语句 Break 和 Continue 使用 JS 近两年,现整理下一些基本: HTML ...
【CF1068B】LCM（数学）
题意:给定b,求lcm(a,b)/a有几种不同的取值 b<=1e10 思路:只有a取b的因子时答案两两不同 #include<cstdio> #include<cstring& ...
DataReader和Dataset的性能比较以及什么时候用dataset什么时候用DataReader
原文发布时间为:2009-11-13 -- 来源于本人的百度文章 [由搬家工具导入] DataReader和Dataset的性能比较以及什么时候用dataset什么时候用DataReader 【技术 ...

jQuery 基础学习

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

随机推荐

热门专题