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>
时间: 2024-10-21 02:26:01

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

python学习之路前端-jQuery

jQuery简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得

python学习笔记十七:base64编码

Python中进行Base64编码和解码要用base64模块,代码示例: #-*- coding: utf-8 -*- import base64 str = 'cnblogs' str64 = base64.b64encode(str) print str64 #Y25ibG9ncw== print base64.b64decode(str64) #cnblogs

python学习(十七) 扩展python

c, c++, java比python快几个数量级. 17.1 考虑哪个更重要 开发速度还是运行速度更重要. 17.2 非常简单的途径:Jython和IronPython Jython可以直接访问JAVA标准库. IronPython中可以直接访问C#标准库. 17.3 编写C语言扩展 扩展Python通常就是扩展CPython,是用c语言实现的标准Python版本. 17.3.1 SWIG swig是简单包装和接口生成器的缩写,是一个能用于几种语言的工具.一方面,可以通过它使用c语言或者C++

python学习第十七天 --定制类

何为定制类? Python的class允许定义许多特殊方法,可以让我们非常方便地生成特定的类.在类中应用或者重写python的特殊方法,得到的类,就是定制类. 大家都知道print的用法.见下面例子 >>> lst = [2,3,4] >>> print lst [2, 3, 4] >>> class Animal(object): pass >>> a = Animal() >>> print a <__ma

python学习第十七天

jQuery 中文在线文档  jquery.cuishifeng.cn jQuery对象[0] =DOM对象 $(DOM对象) =jQuery对象 基本选择器 根据id查找 $('#i1') 根据classname查找 $('.c1') 根据标签查找 $(a) 组合查找 $("#i1,.c1,a") 层级选择器 找出id为i1的标签下所有的a标签 $("#i1 a") 找出id为i1的标签下所有的为a标签的子标签 $("#i1>a") 根据

python 学习 第八篇 jquery

简介: jQuery是一个javascript库.极大滴简化了javascript编程. 包含内容: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX 1:下载 jQuery 共有两个版本的 jQuery 可供下载:一份是生产版本jQuery.min.js(最小化和压缩过的),另一份是开发版jQuery.js(未压缩的供调试或阅读). 这两个版本都可http://jquery.com/downloa

Python学习(十七)—— 数据库(二)

一. 数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上.如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件都运行在一台机器上,那么用文件存取数据,并没有问题. 但是很不幸,上述假设存在以下几个问题...... 1.程序所有的组件就不可能运行在一台机器上 #因为这台机器一旦挂掉则意味着整个软件的崩溃,并且程序的执行效率依赖于承载它的硬件,而一台机器机器的性能总归是有限的,受限于目前的硬件水平,就一台机器的

Python 学习 第十七篇:元组和集合

元组和集合是Python中的基本类型 一,元组 元组(tuple)由小括号.逗号和数据对象构成的集合,各个项通过逗号隔开,元组的特点是: 元组项可以是任何数据类型,也可以嵌套 元组是一个位置有序的对象的集合,通过偏移来访问元组项, 只不过元组是不可变的,不能在原处修改: 元组的各个项可以重复,例如,一个元组可以是:(1, 1, 2, 2, 3) 1,创建元组 创建空的元组,一个空元组就是一个内控的小括号: >>> t=() 创建包含一个项的元组,t=(1,)是一个元组,t=(1)是一个整

Python学习日记(十七) os模块和sys模块

os模块 1.os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 import os print(os.getcwd()) #C:\Users\Administrator\PycharmProjects\PYL\temp_file 2.os.chdir() 改变当前脚本工作目录;相当于shell下cd import os print(os.getcwd()) #C:\Users\Administrator\PycharmProjects\PYL\temp_file o