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="全选" οnclick="checkAll();" /><input type="button" value="反选" οnclick="reverseAll();" /><input type="button" value="取消"  οnclick="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 οnclick="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>

转载于:https://www.cnblogs.com/system-public/p/6116088.html

Python 学习第十七天 jQuery相关推荐

【Python学习系列十七】基于scikit-learn库逻辑回归训练模型(delta比赛代码2)
机器学习任务流程:学习任务定义->数学建模->训练样本采样->特征分析和抽取->算法设计和代码->模型训练和优化(性能评估和度量)->泛化能力评估(重采样和重建模) ...
python学习（十七）扩展python
c, c++, java比python快几个数量级. 17.1 考虑哪个更重要开发速度还是运行速度更重要. 17.2 非常简单的途径:Jython和IronPython Jython可以直接访问JA ...
Python学习札记(十七) 高级特性3 列表生成式
参考:列表生成式 Note 1.List Comprehensions,即列表生成式,是Python中内置的非常强大的list生成式. eg.生成一个列表:[1*1, 2*2, ..., 10*10] ...
Python学习（十七）—— 数据库（二）
转载自http://www.cnblogs.com/linhaifeng/articles/7356064.html 一. 数据库管理软件的由来基于我们之前所学,数据要想永久保存,都是保存于文件中, ...
Python学习日记(十七) os模块和sys模块
os模块 1.os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 import os print(os.getcwd()) #C:\Users\Administrator\ ...
从滚动条到画布的几个代码文件——Python学习笔记之十七
从滚动条到画布的几个代码文件--Python学习笔记之十七这一章的继续学习,比在前的照片涉及代码要轻松一些,代码打完后的预期结果总能实现.特别让人欣慰的一点,文本上的文字理解好像上了一个台阶,不用多 ...
第四单元用python学习微积分（二十七）积分-部分分式-分部积分
本文内容来自于学习麻省理工学院公开课:单变量微积分-分部积分-网易公开课开发环境准备:CSDN 目录一.多项式部分分式方法求积分 1.效果 2.步骤 (1) 长除法 (2) 分解因式 (fac ...
Python学习的十个阶段，学完大成，对应一下看看你自己在哪个阶段
大家好,我是梦雅. \ 今天给大家整理了Python学习的十个阶段内容,看看你现在正处于哪个阶段,想学习的朋友也可以根据这个阶段规划学习. \ \ \ 阶段一:Python基础[ 初入江湖] \ Li ...
Python学习六大路线，教你快速上手
最近几年随着互联网的发展学习Python人越来越多,Python的初学者总希望能够得到一份Python学习路线图,小编经过多方面汇总,总结出比较全套Python学习路线,快速上手.对于一个零基础的想学 ...

Python 学习第十七天 jQuery

Python 学习第十七天 jQuery相关推荐

最新文章

热门文章