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

随机推荐

MySQL之架构与历史（二）
多版本并发控制 MySQL的大多数事务型存储引擎实现的都不是简单的行级锁.基于提升并发性能的考虑,它们一般都同时实现了多版本并发控制(MVCC).不仅是MySQL,包括Oracle.PostgreSQ ...
如何排查Java内存泄漏？看完我给跪了！
没有经验的程序员经常认为Java的自动垃圾回收完全使他们免于担心内存管理.这是一个常见的误解:虽然垃圾收集器做得很好,但即使是最好的程序员也完全有可能成为严重破坏内存泄漏的牺牲品.让我解释一下. 当不 ...
Maven web项目的项目如何创建
1.eclipse--创建maven项目--选择打包方式为war 2.此时项目还缺少一些东西,比如web-inf,web.xml配置文件之类的 3.项目右键-properties-project fa ...
Java资料整理
Java资料整理原创 2017年08月25日 17:20:44 14211 1.LocalThread的应用场景,数据传输适合用LocalThread么 2.linux的基本命令软链接.更 ...
C#入门篇5-8:流程控制语句 break语句
#region break语句 public class Breakapp { public static void Fun1() { //计算1+2+…+100的求和程序,打印显示每次循环计算的结果 ...
11 JVM 垃圾回收（上）
引用计数法和可达性分析垃圾回收,就是将已经分配出去的,但却不在使用的内存回收回来,以便再次分配.在 Java 虚拟机语境下,垃圾指的是死亡的对象所占据的堆空间.下面就总结一下如何如何辨别一个对象是否 ...
python 删除重复文件附源代码
啥也不说了,直接上源码 #! /usr/bin/env python #coding=utf-8 import os import md5 import time def getmd5( filena ...
sqlserver不能创建数据库关系图
use [你的数据库名]EXEC sp_changedbowner 'sa'
java 例子
1. 本章学习总结今天主要学习了三个知识点封装继承多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一个重要的命令javac ...
Codeforces #990E Post Lamp
题目大意今欲用若干条长为 $k$($1\le k\le m, k\in \mathbb{Z}$) 的线段覆盖数轴上 $[0,n]$ 这一段.线段的起点(左端点)必须为 $[0, n-1]$ 中的某个 ...

jQuery 基础学习

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

随机推荐

热门专题