Python3.5 学习十七
jQuery
模块=类库 jQuery就是DOM 、BOM、Javascript的封装成的类库
一、查找元素、DOM只有10种左右选择器
jQuery有很多选择器和筛选器
PS:jQuery 推荐1系列最新版本,兼容性更好 1.12
对象转换:一 jquery对象[0] =>Dom对象
对象转换二:$(Dom对象)=jquery对象
选择器:$('')=jQuery('') =document.getXXX('')
1 ID :$('#id')
2 class :$('.c1')
3 标签 :$('a')
4 所有 $('*')
5 组合 $('a,.c2,#i10')
6 层级 $('#i10 a') 子子孙孙
$('#i10>a') 只找儿子
$('#i10+') 下一个
$('#i10-') 前一个
7 筛选器(可以与上面选择器组合使用)
- :not(selector) 不选择、除了
- :even 奇数个
- :odd 偶数个
- :eq(index) 根据索引查找$('#i10 a:eq(0)')
- :gt(index) 索引大于多少的
- :lang1.9+ 语音识别、翻译时用
- :last 最后一个
- :lt(index) 索引小于多少的
- :header 找到所有的H标签
- :animated 正在执行动画的
- :focus 获取焦点的
- :root1.9+
- :target1.9+
8 属性 $('[xxx]') 具有属性xxx的标签
$('[xxx="123"]') 属性xxx等于123的标签
9 表单选择器:可以不用记,用属性选择器也能解决
$(':text')=$('input[type='text']')
二、操作元素
实例:多选、反选、全选
jQuery方法内置循环,不需要再循环操作
$(':checkbox').each(function (k) {
//this = DOM标签,当前循环的元素 $(this)
//k 当前索引值
})
设置值 $(this).prop('checked',false)
选择值 $(this).prop('checked')
三元运算的使用 var v=条件?真值:假值
左侧菜单:
$(this).next()
$(this).prev()
$(this).parent()
$(this).children()
$(this).siblings()
$(this).find() jQuery的链式编程,多语句有时可以叠加写。 标签文本操作:查看$('').text()
$('').html()
$('').val()
如果加参数,则为设置内容
input系列的值操作,只要DOM的value操作的,这里都一样: $('').val()查看
$('').val('')赋值 PS:写事件的两种方式,不管传过来的还是直接在script中创建事件方法,this都是DOM标签对象
1 如果在标签里直接写事件,则在script中
1 function edit(this) {
//this是DOM标签对象
}
2 $('.header').click(function (k) {
//this是DOM标签对象
}
样式操作:addClass,removeClass,hasClass,toggleClass(样式没有则添加,有则删除) 属性操作:
$('').attr
专门用于做自定义属性 可以设置属性
$('').attr('type') 可以查看属性
$('').attr('key','value') 可以设置属性
与之相对 $('').removeattr('key') 删除属性 $('').prop
专门用于为checkbox和radio类标签做操作的,不要用attr做这些标签的操作,可能会失效
$('').prop('checked',true) 设置值
$('').prop('checked') 获取值
文档处理
var temp = 字符串拼接
$('').append(temp);
$('').prepend(temp);
$('').after(temp);
$('').before(temp);
$('').remove();
$('').empty();
$('').clone();
CSS处理:
$('').css('样式名称','样式值')
点赞:需要用到的功能点:
$('').append()
setinterval
透明度
position
字体大小设置
位置:
$(window).scrollTop() 获取
$(window).scrollLeft()
$(window).scrollTop(0) 设置
$(window).scrollLeft(0)
$().offset() 获取坐标 相对整个窗口的位置
$().offset().top
$().offset().left
$().position() 相对上一个relative的标签的相对位置
$().height() 获取标签的纯高度
$().innerHeight() 获取边框+纯高度
$().outerHeight()
写例子:获取纯高度、边框、外边距、内边距
绑定事件的方式
DOM:三种
jQuery: 1 $().click() ...很多 把on都去掉了
2 $().bind('click',function(){})
$().unbind('click',function(){})
3 $('.c').delegate('a','click',function(){}) ***委托 这是比较牛掰的方式去动态绑定新增标签的事件
$('.c').undelegate('a','click',function(){}) 只有在代码执行的时候才会绑定事件
4 $().on('click',function()) 基本型
$().outerHeight(true)
a标签 加载onclick事件后,如果事件最后返回false,则不会再执行href的网址跳转了
两种绑定方式的不同,DOM方式,需要多写一个return
onclick = "return clickon();
如果用jquery方式,则不用写return
阻止事件发生
jquery的each方法,做判断和返回时,false只退出each的函数体,最外层函数并不会返回false值,只能做一个flag来处理
正常页面执行顺序
所有元素渲染完成后,才会加载script事件
想要提前加载事件
<SCRIPT>
$(function () {
});
当页面框架加载完毕后,就执行这里面的script事件绑定
jQuery的扩展
1 $('').jquery的选择器的方法
2 ¥.ajax() jquery扩展
$.fn.extend
$.extend
为避免引入多种第三方扩展导致方法名、变量名重复的问题,可以使用自执行函数方法去规避
把每个扩展都包装在一个自执行函数体内
(function(arg) {
var status = 1;
arg.extend({
'func_name':function(){
}
}
);
})(jQuery);
jQuery作业:
1 练习获取标签高度和边框、纯高度的
2 所有示例手敲一遍
3 实现编辑框功能
js正则 正则表达式用\ \括起来
两种方法来使用
test 判断字符串是否符合规定的正则
rep = /\d+/;
rep.test('dafdasf432aaaa')
# true
rep = /^\d+$/;
rep.test('sadfasdfasd34535qqq')
# false
exec提取根据正则匹配到的数据
rep = /\d+/;
str = "wangshen_67_houyafa_20"
rep.exec(str)
# ['67']
分组匹配1
"JavaScript is more fun than Java or JavaBeans!"
var pattern = /\bJava(\w+)\b/;
# ['JavaScript','Script']
全局匹配
var pattern = /\bJava\w+\b/g;
# ['JavaScript']
# ['Java']
# ['JavaBeans']
# null
全局分组匹配
var pattern = /\bJava(\w+)\b/gm;
# ['JavaScript','Script']
# ['Java','']
# ['JavaBeans','Beans']
# null
基于jQuery的三大第三方组件
一、BootStrap 最强大、既有组件也有多种模板可直接修改使用
二、EasyUI 界面一般,可以修改使用
三、JQueryUI 界面较为好看,里面可能会用到Ajax。直接使用可以,但如果要修改起来会比较麻烦。 推荐使用BootStrap
以后写代码优先从网上找现成的合适自己的组件或模板,修改使用,以提高工作效率。
BootStrap使用中注意三点:
一、响应式布局:@media 根据条件变化修改CSS样式
二、图标、字体:使用字体来做图标,调用的时候直接根据图标代码来调用图标就可以用了。
三、基本使用:调用样式,如果做一定的修改,而且写在了前面,如果想生效,则在后面加上 ! important
轮播插件的使用:
bxslider.com jQuery学习参考网站:
http://jquery.cuishifeng.cn/
Python3.5 学习十七的更多相关文章
- python3.4学习笔记(十七) 网络爬虫使用Beautifulsoup4抓取内容
python3.4学习笔记(十七) 网络爬虫使用Beautifulsoup4抓取内容 Beautiful Soup 是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖 ...
- python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例
python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...
- python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息,抓取政府网新闻内容
python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI,采用Python语言编写 ...
- python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置
python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置Download JetBrains Python IDE :: PyCharmhttp://www. ...
- python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码
python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...
- python3.4学习笔记(二十五) Python 调用mysql redis实例代码
python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...
- python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法
python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...
- python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码
python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码 淘宝IP地址库 http://ip.taobao.com/目前提供的服务包括:1. 根据用户提供的 ...
- python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字
python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字在字符串里面插入指定分割符的方法,先把字符串变成list然后用join方法变成字符串str=' ...
随机推荐
- Eclipse编辑XML自动提示(zz)
Eclipse编辑XML自动提示 博客分类: j2se XMLEclipseiBATISSpringSQL IED Eclipse Java EE IDE for Web Developers: D ...
- 在Eclipse中运行JAVA代码远程操作HBase的示例
在Eclipse中运行JAVA代码远程操作HBase的示例 分类: 大数据 2014-03-04 13:47 3762人阅读 评论(2) 收藏 举报 下面是一个在Windows的Eclipse中通过J ...
- 第一个C#语言
第一个C#程序 .NET和C#的区别 1. C#只是.NET的一部分,.NET不止包含C# 2. C#是一种程序语言,.NET是一个平台.框架 IDE环境:vs 2012 VS2012的窗口结构 ...
- 51.从首页内容跳转到第二个Tabbar控制器(controller)
TabBarController: 创建TabBar的控制器 注意:在点击的内容方法页面,添加头文件 #import "TabBarController.h" #import &q ...
- 2019.01.23 hdu1964 Pipes(轮廓线dp)
传送门 题意简述:给一个没有障碍的网格图,任意两个格子连通需要花费一定代价,现在求一条覆盖所有格子的哈密顿回路的总权值的最小值. 思路: 跟这道题一毛一样,除了把求和变成求最小值以外. 代码: #in ...
- ant Design和ant Design mobile的使用,并实现按需加载
1.全局安装yarn npm install -g create-react-app yarn 2.创建react项目,并用yarn start 运行 3.引入antd/引入antd-mobile y ...
- 02 Django配置信息
2-1 基本配置信息 import os # 项目路径 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # ...
- 关于矩阵A*b=A*c 中b是否等于c
注意如果A各列线性无关那么b=c,反之b!=c, 针对最小二乘中的 p=A * roof_x A' ( b-p)=0 => A'b =A' p 如果 两边同乘以A , ...
- 介绍用C#和VS2015开发基于Unity架构的2D、3D游戏的技术
[Unity]13.3 Realtime GI示例 摘要: 分类:Unity.C#.VS2015 创建日期:2016-04-19 一.简介 使用简单示例而不是使用实际示例的好处是能让你快速理解光照贴图 ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html