jQuery：就是让页面动起来

　　参考手册：http://jquery.cuishifeng.cn/

　　DOM/BOM/javaScript 继承的类库 《---》模块

一、查找元素

　　二、操作元素

　　三、实例

一、jQuery的导入

版本：1.x 2.x 3.x 推荐使用1.x版本（兼容浏览器低版本）

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

 　　<scirpt>

 　　　　$. 或 jquery.来调用方法

 　　</script>

jquery与dom相互转换：

　　jquery对象【0】 --》 dom对象

　　dom对象            -->  $(dom对象)

二、查找元素

2.1选择器

1.id选择器

     　　$('#id')

2.类选择器

        $('.class')

3.标签选择器

        $('p')

4.属性选择器

        $('[alex]')              查找具有alex属性的标签

        $('[alex="sb"]')         查找alex=‘sb’属性的标签
　　　　 $('input[type="text"]')  超找input标签中text的标签
5.组合选择器
　　　　　$(a,.class,#id)　　　　　　以，隔开
6.层级选择器
　　　　　$(div a)                 子子孙孙，div下的a标签
　　　　　$(div>a)　　　　　　　　　　只找儿子
7.基本过滤
　　　　 :first  第一个
　　　　 :eq　　　索引0开始
　　　　 :odd 　　偶数

2.2 筛选器

根据选择器选的东西，进行筛选

    parent()    　　父标签
　　　　　　parents() 　　输出所有的父亲的标签
　　　　　　parentsUntil() 输出所有的父亲标签，直到什么为止

    children() 　　 所有的子标签

    next()      　　下一个标签 
　　　　　　nextall() 　　找到下面全部
　　　　　　nextUntil() 　找到下面某一个为止　

    perv()      　 上一个标签

    siblings()      所有的兄弟便签，除了自己
　　
　　eq()   　　　　　　根据索引来查找
　　first()　　　　　　第一个
　　last()　　　　　　 最后一个
　　hasClass()　　　　有该属性

左侧菜单jquery实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .menu{

            width: 80px;

            border: 1px solid #ddd;

        }

        .header{

            border: 1px solid #dddddd;

            height: 30px;

            background-color: #2459a2;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

        <div class="menu">

            <div class="item">

                <div class="header">菜单1</div>

                <div class="content">内容1</div>

            </div>

            <div class="item">

                <div class="header">菜单2</div>

                <div class="content hide">内容2</div>

            </div>

            <div class="item">

                <div class="header">菜单3</div>

                <div class="content hide">内容3</div>

            </div>

            <div class="item">

                <div class="header">菜单4</div>

                <div class="content hide">内容4</div>

            </div>

        </div>

        <script src="jqure/jquery-1.12.4.js"></script>

        <script>

            $('.header').click(function(){

                //this  当前点击的便签对象

                //要是jquery 必须先进行转换

//                $(this).next().removeClass('hide');

//                $(this).parent().siblings().children('.content').addClass('hide')

                //支持链式编程

                $(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');

               //$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');

            })

        </script>

</body>

</html>

左侧菜单case

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

        <input id='i1' type="button" value="全选">

        <input id="i2" type="button" value="取消">

        <input id="i3" type="button" value="反选">

        <table id='tb' border="1px">

            <tr>

                <th>选择</th>

                <th>主机</th>

                <th>IP</th>

            </tr>

            <tr>

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

                <td>1.1.1.1</td>

                <td>888</td>

            </tr>

            <tr>

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

                <td>1.1.1.1</td>

                <td>888</td>

            </tr>

            <tr>

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

                <td>1.1.1.1</td>

                <td>888</td>

            </tr>

            <tr>

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

                <td>1.1.1.1</td>

                <td>888</td>

            </tr>

            <tr>

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

                <td>1.1.1.1</td>

                <td>888</td>

            </tr>

            <tr>

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

                <td>1.1.1.1</td>

                <td>888</td>

            </tr>

        </table>

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

        <script>

            //使用jquery的each循环方法

            //this 是代表每一个被过滤出来的对象（dom对象）

            //$(dom) 进行转换

//            $('#i1').click(function() {

//                $('#tb :checkbox').each(function(k) {

//                    //console.log(this)  查看this的属性

//                    //console.log($(this))

//

//                    //dom的实现方式

////                    if(this.checked){

////                        this.checked=false;

////                    }

//

//                    //第二种jquery的方法

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

//                })

//            });

            $('#i1').click(function(){

                //内部自己帮我们进行循环

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

            });

            $('#i2').click(function(){

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

            });

            $('#i3').click(function(){

                //进行反选的时候，无法使用简单的内部循环，so我们使用each方法

                //each的k代表索引

                $('#tb :checkbox').each(function () {

                    var tag=$(this).prop('checked')?false:true;

                    //使用三元运算判断当前的的选择状态

                    $(this).prop('checked',tag)

                })

            })

        </script>

</body>

</html>

全选 反选 取消

二、操作元素

2.1文本操作

$(..).text()        获取文本

$(..).text(..)    　设置文本

$(..).html()

$(..).html(..)    

$(..).val()    
$(..).val(..)        设置value

2.2 样式操作

addClass()

removeClass()

hasClass()

toggleClass()        其实就是对上面的封装
        <input type="button" value="开关">

        <div class="i1 hide">dedewfqf</div>

        <script src="jqure/jquery-1.12.4.js"></script>

        <script>

            $('input').click(function () {

//                if($('.i1').hasClass('hide')){

//                    $('.i1').removeClass('hide')

//                }else {

//                    $('.i1').addClass('hide')

//                }

                $('.i1').toggleClass('hide')

            })

        </script>

开关灯case

2.3 属性操作

#对自定义的样式进行操作
$(..).attr(n)　　　　 　　 获取该属性设置的值

$(..).attr(n,v)　　 　　  设置该属性

$(..).removeAttr(n) 　　  删除该属性
　　在jquery中1.x 2.x 　　 中对checkbox radio使用该方法会出错，兼容性问题

#专门对checkbox radio选中的操作
$(..).prop('checked') 　　　　　　返回选中状态
$(..).prop('checked'，‘true’)　　设置选中

index() 索引操作

#css中style的操作
$('t1').css('样式名称', '样式值')
 

2.3 文档处理

#添加

append        在后面追加

prepend　　 在前面加

after　　　　平级后加

before　　　　平级前加

#删除

remove       移除标签

empty　　　    只清空内容

#克隆

clone

　2.4 位置操作

滑动滚轮与滚轮当前的位置
1 $(window).scrollTop();        获取

 $(window).scrollTop();　　　设置并移动
3 $(window).scrollLeft();       类似上面

位置操作
$(window).offset()
$('div').offset()                 获取到的是一个数组
$('div').offset().top　　　　      获取数组中top
$('div').offset().left　　　　　    获取数组中left
　　　　offset 是标签在文档中(可见窗口)的位置
postion()　　　　　　　　　　　　　　　是针对父标签的位置  如果对absolute标签，那他的父级是第一个relative标签（不管其他的层数）　

$(..).height()　　　　　 　标签真实高度
$(..).innerHeight()  　　 真实高度+padding
$(..).outerHeight()  　　 真实高度+padding+border
$(..).outerHeight(true)  真实高度+padding+border+margin

2.5事件

绑定事件

 ('..').click(function(){})

      区别dom的  都没有on

 ('..').bind(‘click’，function(){})

 ('..').unbind(‘click’，function(){})

         为事件解绑

 $('.c').delegate('a', 'click', function(){})

 $('.c').delegate('a', 'click', function(){})

        deletage 有个特殊的使用方法

                       在html中，添加元素之后，无法进行绑定。使用该方法就可以动态绑定

 ********************************

 上面的三种方法都是基于on 与 off封装的

 $('.c1').on('click', function(){})

 $('.c1').off('click', function(){})

阻止事件发生

　　当事件的返回值为flase时，另外一个事件就不会执行

　　在dom中，绑定事件的时候需要加一个return

　　在jquerey中，直接在函数中return就可以了

案例：

　　当前页面  未连接 是红色字体，需要改成正常，颜色为black

$('font:contains("未连接")').text('正常')
$('font:contains("正常")').css({'color':'black'})
$('span:contains("2018")').text('2018-03-16')

前端-高潮 jQuery的更多相关文章

  1. 前端之jquery

    前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...

  2. 第四篇：web之前端之jquery

    前端之jquery   前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...

  3. 【前端】:jQuery下

    前言: 接上一篇博客: [前端]:jQuery上 一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是 ...

  4. 【转】jQuery之前端国际化jQuery.i18n.properties

    jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties

  5. 前端：jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

  6. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  7. 前端技术Jquery与Ajax使用总结

    前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但 ...

  8. Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)

    Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...

  9. 第五章、前端之JQuery

    目录 第五章.前端之JQuery 一.选择器 二.基本筛选器 三.样式操作 四.位置操作 五.文本操作 六.属性操作 七.文档处理 八.事件 九.动画效果 十.补充 第五章.前端之JQuery 一.选 ...

随机推荐

  1. 51Nod 1004 n^n的末位数字(日常复习快速幂，莫名的有毒，卡mod值)

    1004 n^n的末位数字 题目来源: Author Ignatius.L (Hdu 1061) 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 给出一个整数N,输出 ...

  2. [51nod1532]带可选字符的多字符串匹配

    有一个文本串,它的长度为m (1 <= m <= 2000000),现在想找出其中所有的符合特定模式的子串位置. 符合特定模式是指,该子串的长度为n (1 <= n <= 50 ...

  3. Java大数应用

    1.大数加法 import java.math.BigInteger; import java.util.Scanner; public class Main { public static void ...

  4. python写一个邮箱伪造脚本

    前言: 原本打算学php MVC的思路然后写一个项目.但是贼恶心, 写不出来.然后就还是用python写了个邮箱伪造. 0x01 第一步先去搜狐注册一个邮箱 然后,点开设置,开启SMTP服务. 当然你 ...

  5. [国嵌攻略][163][linux-usb软件系统架构]

    软件系统架构 1.主机端软件架构 USB设备驱动->USB核心->USB主控制器驱动->USB主控制器 2.设备端软件架构 Gadget驱动->Gadget API->U ...

  6. 快速搭建appium自动测试环境

    首先申明本文是基本于Python与Android来快速搭建Appium自动化测试环境: 主要分为以下几个步骤: 前提条件: 1)安装与配置python环境,打开 Python官网,找到"Do ...

  7. Java多线程编程—锁优化

    并发环境下进行编程时,需要使用锁机制来同步多线程间的操作,保证共享资源的互斥访问.加锁会带来性能上的损坏,似乎是众所周知的事情.然而,加锁本身不会带来多少的性能消耗,性能主要是在线程的获取锁的过程.如 ...

  8. zookeeper部署和运行

    环境准备: 操作系统,此处使用windows系统 Java运行环境,JDK1.6以上 下载对应操作系统zookeeper安装包zookeeper-x.x.x.tar.gz,下载地址:http://zo ...

  9. ser-u服务器安装和使用（创建ftp服务器）

    安装serv-u,创建ftp服务器,以及连接服务器上传和下载文件. 工具/原料 serv-u,8uftp 装有win7以上或者winserver系统的电脑 安装serv-u 1 http://pan. ...

  10. 修真院java后端工程师学习课程--任务1(day one)

    这是我从学习资料-线下报名-北京报名截取的报名截图,从图中我们可以看出我们的报名对象应该有姓名,qq,修真类型,预计入学时间,毕业院校,线上学号,日报链接,立愿,辅导师兄等属性,其中线上学号是主码. ...