Python 学习第十七天 jQuery

一，jQuery 知识详解

利用jquery 查找元素，操作元素

1，jquery 引入

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="i1">123</div>

    <script src="jquery-1.12.4.js"></script>                 #下载jq文件并放到本地

    $("#id"）                                                #jq引用jQuery方法或者$  $符相当于jQuery

                                                             #$("#id"）利用jQuery或者i1标签 $("#id").xxxx xxxx为jQuery方法

</body>

</html>

2，jquery和DOM之间的转换

jquery对象[0] => DOM 对象，DOM 对象 => $(DOM对象)

3，jquery 选择器

　　1，标签选择器

（1）根据id查找 $('#id')

　（2）根据class查找 $(".c1")

（3）标签选择器 $('a') 选取所有的a标签

（4）组合选择器 $('a,.c2,#i10') 找到所有的a标签和所有的class为c2的标签，以及ID为i10的标签

　 2，层级选择器

　　（1）$('#i10 a') 先找到id 为i10的标签，然后再找i10下面的子子孙孙a标签

　　（2）$('#i10>a'）只找i10下面的子标签为a为标签

　　3，筛选器

　　（1）$('#i10>a:first)找到id为i10的子标签的第一个a标签，:last 表示最后一个用法同：first

　　（2）$('#i10 a:eq(0)') 找到id为i10的所有a标签并且索引值为0的a标签：gt(index),:lt(index)用法同:eq

　　4，根据属性查找

　　（1）$('[alex]') 找到所有具有属性alex的标签

　　（2）$('[alex="123"]') 找到具有属性alex且值为123的标签，注意双引号

　　（3）$("input[type='text']") 找到所有input 标签 type属性为text的标签

　　5，表单选择器

　　（1）$(":test") 找到所有的input标签type属性为text的标签

　　（2）$(":disabled") 找到所有表单对象中不可编辑的标签

　　6，全选，反选，取消示例代码

　　（1）$('#tb:checkbox').prop('checked',true) 传值表示设置值

　　（2）$('#tb:checkbox').prop('checked') 没传值表示获取值

　　（3）$('#tb:checkbox').xxx jquery方法内置循环

　　（4）$('#tb:checkbox').each(function(k){

　　　　　　each 为jquery循环

　　　　　　k为当前的索引

　　　　　　this,DOM元素，指当前循环的元素 $(this)为 jquery元素

　　}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="全选" onclick="checkAll();" />

    <input type="button" value="反选" onclick="reverseAll();" />

    <input type="button" value="取消"  onclick="cancleAll();"/>

    <table border="1">

        <thead>

            <tr>

                <th>选项</th>

                <th>IP</th>

                <th>PORT</th>

            </tr>

        </thead>

        <tbody id="tb">

            <tr>

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

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

            <tr>

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

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

            <tr>

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

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

        </tbody>

    </table>

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

    <script>

        function checkAll() {

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

        }

        function cancleAll() {

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

        }

        function reverseAll() {

            $(':checkbox').each(function(k){

                // this,代指当前循环的每一个元素，并且为dom 对象，需要加$() 转化为jquery对象

                /*

                if(this.checked){                   #利用DOM对象处理

                    this.checked = false;

                }else{

                    this.checked = true;

                }

                */

                /*

                if($(this).prop('checked')){        #利用jquery对象处理

                    $(this).prop('checked', false);

                }else{

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

                }

                */

              // 三元运算var v = 条件? 真值：假值

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

                $(this).prop('checked',v);

            })

        }

    </script>

</body>

</html>

7，jquery操作class

　（1） $('#i1').addClass('hide') 增加hide class $('#i1').removeClass('hide')移除hide class

8，筛选器

　在筛选器中可以增加参数，例如find(“#i1”)

　（1）$(this).next() 获取当前标签的下一个标签

　（2）$(this).prev() 获取当前标签的上一个标签

　（3）$(this).parent() 获取当前标签的父标签

　（4）$(this).children()获取当前标签的子标签

（5）$(this).sibings() 获取当前标签的兄弟标签

　（6）$(this).parent().find(“.content”) 获取父级标签的子子孙孙标签中所有的class 包含content的标签

左侧菜单示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .header{

            background-color: black;

            color: wheat;

        }

        .content{

            min-height: 50px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div style="height:400px;width: 200px;border: 1px solid #dddddd">

        <div class="item">

            <div class="header">标题一</div>

            <div id="i1" class="content hide">内容</div>

        </div>

        <div class="item">

            <div class="header">标题二</div>

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

        </div>

        <div class="item">

            <div class="header">标题三</div>

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

        </div>

    </div>

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

    <script>

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

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

        })

    </script>

</body>

</html>

（7）和$('li:eq(1)')类似的方法$('li').eq(1) 同.eq(1) 类似的还有first(),last(),hasClass(class)

　（8）$('#i1').next() 找到下一个 $('#i1').nextAll()找到下面所有的 $('#i1').nextUntil('#i1') 找到下面所有的知道id为i1的标签

　9，文本操作

　（1） $(..).text() #选择器加上.text() 方法获取标签的内容

（2） $(..).text(“<a>1</a>”） .text的括号中加上内容为修改标签的内容

　（3） $(..).html() #获取标签

　（4） $(..).html("<a>1</a>") #设置标签内容

　（5） $.(..).val() #获取值

　（6） $.(..).val() #设置值

10，样式操作

<script>                                                  #开关灯代码

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

            if($('.c1').hasClass('hide')){

                $('.c1').removeClass('hide');

            }else

                $('.c1').addClass('hide');

            $('.c1').toggleClass('hide')              #用一句可以替代上面的if{}else{}语句

    })

</script>

11，自定义属性的操作

　（1）$(..).attr

　　　 $(..).attr('n') 获取自定属性的值例$('#i1').attr('file')获取id为i1的标签的file 属性的值

　　　 $(..).attr('n','v') 为标签n 属性设置值为v

　　　 $(..).removeAttr('n') 取标签的n属性

　（2）$(..).prop 用于checkbox,radio选中操作用法同attr

12，CSS cursor:pointer; 点击设置为小手

13，增加标签

    <script>

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

            var v = $('#t1').val();

            var temp = "<li>" + v + "</li>";

            // $('#u1').append(temp);                 #在获取的标签下面添加标签

            $('#u1').prepend(temp);                   #在获取的标签的上面添加标签

            // $('#u1').after(temp)                      #在最外边的后面添加标签

            // $('#u1').before(temp)                    #在最外边的上面添加标签

        });

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

            var index = $('#t1').val();

            //$('#u1 li').eq(index).remove();        #删除文本内容

            //$('#u1 li').eq(index).empty();          #清空文本内容

        });

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

            var index = $('#t1').val();

            var v = $('#u1 li').eq(index).clone();

            $('#u1').append(v);

            //$('#u1 li').eq(index).remove();

            //$('#u1 li').eq(index).empty();

        })

14 ，滚轮设置

　（1） scrollTop([val]) 上线滚轮

　（2）scrollLeft([val]) 左右滚轮

15，事件绑定

　（1） $('.c1').click() 绑定click事件

　（2） $('.c1').bind('click',function(){}) 绑定click事件

（3） $('.c1').unbind('click',function(){}) 解绑定

　（4） $('.c1'）.delegate('a','click',function(){}) 给c1下面的所有的a标签绑定一个事件，以委托的方式绑定

　（5） $('.c1').undelegate('a','click',function(){}) 给c1下面的所有的a标签解绑定

　（6） $('.c1').on('click'.function(){}) 给c1绑定click事件

　（7） $('.c1').off('click',function(){}) 给c1解绑定click事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>

    <a id="i1" href="http://www.oldboyedu.com">走你2</a>

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

    <script>

        function ClickOn() {

            alert(123);

            return true;                             #绑定事件执行

        }

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

            alert(456);

            return false;                             #绑定事件不执行

        })

    </script>

</body>

</html>

Python 学习第十七天 jQuery的更多相关文章

python 学习笔记十四 jQuery案例详解（进阶篇）
1.选择器和筛选器案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
python学习之路前端-jQuery
jQuery简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safa ...
6月4日 python学习总结初次接触jQuery
1. jQuery是什么?是一个轻量级的,兼容多浏览器的JS库(write less, do more) 1. 是一个工具,简单方便的实现一些DOM操作 2. 不用jQuery完全可以,但是不明智. ...
python 学习笔记十七 django深入学习二 form，models
表单 GET 和 POST 处理表单时候只会用到GET 和 POST 方法. Django 的登录表单使用POST 方法,在这个方法中浏览器组合表单数据.对它们进行编码以用于传输.将它们发送到服务器然 ...
python学习第十七天 --定制类
何为定制类? Python的class允许定义许多特殊方法,可以让我们非常方便地生成特定的类.在类中应用或者重写python的特殊方法,得到的类,就是定制类. 大家都知道print的用法.见下面例子 ...
Python学习（十七）—— 数据库（二）
转载自http://www.cnblogs.com/linhaifeng/articles/7356064.html 一. 数据库管理软件的由来基于我们之前所学,数据要想永久保存,都是保存于文件中, ...
Python学习札记(十七) 高级特性3 列表生成式
参考:列表生成式 Note 1.List Comprehensions,即列表生成式,是Python中内置的非常强大的list生成式. eg.生成一个列表:[1*1, 2*2, ..., 10*10] ...
python学习（十七）扩展python
c, c++, java比python快几个数量级. 17.1 考虑哪个更重要开发速度还是运行速度更重要. 17.2 非常简单的途径:Jython和IronPython Jython可以直接访问JA ...
python学习笔记十七：base64及md5编码
一.Python Base64编码 Python中进行Base64编码和解码要用base64模块,代码示例: #-*- coding: utf-8 -*- import base64 str = 'c ...

随机推荐

在QtCreator中使用doxygen
接触Doxygen后,认识到其强大之处,一口气将之前的烂代码重构了一遍,所有的文件头,函数注释等等都是手动添加注释.在keil中可以看到其对JavaDoc风格的注释有高亮,非常好看.但是keil这个I ...
Myeclipse不显示js文件错误的方法
最近在学后台,用Myeclipse ,那么问题来了,Myeclipse 总是喜欢报 js 文件的错误,这就很烦了,看着也不舒服. 查看资料后,解决方法如下: 项目[鼠标右键] -> MyEcli ...
codeforces 459E
codeforces 459E E. Pashmak and Graph time limit per test 1 second memory limit per test 256 megabyte ...
Java Netty 4.x 用户指南
问题今天,我们使用通用的应用程序或者类库来实现互相通讯,比如,我们经常使用一个 HTTP 客户端库来从 web 服务器上获取信息,或者通过 web 服务来执行一个远程的调用. 然而,有时候一个通用的 ...
PHP数组常用函数
[官方]PHP Array 函数一.数组操作的基本函数数组的键名和值 array_values($arr); 获得数组的值 array_keys($arr); 获得数组的键名 array_fl ...
小小C程序（九九乘法表）
用一个简单的嵌套循环实现: #include <stdio.h> int main() { int i,j; ,j=i;i<=&&j<=;) { if (i== ...
Handler sendMessage 与 obtainMessage (sendToTarget)比较
转自:http://iaiai.iteye.com/blog/1992196 obtainmessage()是从消息池中拿来一个msg 不需要另开辟空间new new需要重新申请,效率低,obtian ...
Eclipse的快捷键
Ctrl+Shift+L调出eclipse的所有快捷键不定期更新2016#8#19 如何配置快捷键:windown-preferences-General-key 一些操作 Ctrl+D 删除 ...
Android的Intent.FLAG_ACTIVITY_CLEAR_TOP无效
转载:http://blog.csdn.net/u011361576/article/details/48626237 今天写代码遇到了一个问题: 当 B - A - B 跳转的时候,使用Intent ...
3篇NeuroImage文献分析
鉴于之前读的一些文章很容易就忘掉了,故打算花点时间记录下所读的文献. 这几天花了一些时间读了3篇文献: Intersubject consistency of cortical MEG signals ...

Python 学习第十七天 jQuery

Python 学习第十七天 jQuery的更多相关文章

随机推荐

热门专题