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 ...
随机推荐
- Android Textview实现文字颜色渐变效果
最近做应用的时候遇到一个需求,一行文字的颜色需要一个渐变效果 如上所有 从左到有逐渐变化,自己写了一个demo实现上述效果 package com.huwei.example.test; import ...
- 增量式PID推导及C语言实现
PID控制器表达式为: \[ u(t) = K_pe(t) + K_i\int_0^t e(\tau)d\tau + K_d\frac{de(t)}{dt} \] 离散化: 令 $ t = nT,~T ...
- Ubuntu安装SSH服务器故障分析及解决办法（错误1：E:软件包 openssh-server 还没有可供安装的候选者，错误2：E: 无法修正错误，因为您要求某些软件包保持现状，就是它们破坏了软件包间的依赖关系）
• 微博: 小样儿老师2015 Windows下做Linux开发需要SSH强大功能的支持.安装SSH的过程会出现了很多问题,看完这篇文章可以让你少走些弯路,PS:折腾一下午的成果. Ubuntu ...
- 复选框css
input, select, button, textarea{ -webkit-appearance:none; }该属性会导致复选框失去选择效果
- 【Android自学日记】五大布局常用属性
线性布局(LinearLayout)常用属性: android:orientation="vertical"--决定子类控件的排布方式(vertical垂直:horizontal水 ...
- php中计算二维数组中某一元素之和
[0] => array(5) { ["id"] => string(2) "11" ["name"] => string ...
- BZOJ 3639: Query on a tree VII
Description 一棵树,支持三种操作,修改点权,修改颜色,问所有与他路径上颜色相同的点的最大权,包含这两个点. Sol LCT. 用LCT来维护重边,对于每个节点在建一个set用来维护轻边,这 ...
- SPOJ FTOUR2 - Free tour II
Description 有些黑点,问你选择不超过 \(k\) 个黑点的路径,路径权值最大是多少. Sol 点分治. 这是qzc的论文题,不过我感觉他的翻译好强啊...我还是选择了自己去看题目... 点 ...
- 【POJ2104】K-th Number
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABToAAAJ2CAIAAADwi6oDAAAgAElEQVR4nOy9a5Pj1nnvi0/Q71Llj3
- python之路十五
CSS position 属性 定义和用法position 属性规定元素的定位类型.说明这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身 ...