wordpress 企业整站源码,石家庄网站建设的公司,附近模板木方市场,上海wordpress开发省市联动jQuery快速入门
jQuery介绍
1.jQuery是一个轻量级、兼容多浏览器的JavaScript库 2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互#xff0c;能够极大地简化JavaScript编程。它的宗旨就是#xff1a;“Write less, do mor…省市联动jQuery快速入门
jQuery介绍
1.jQuery是一个轻量级、兼容多浏览器的JavaScript库 2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互能够极大地简化JavaScript编程。它的宗旨就是“Write less, do more.“
jQuery的优势
一款轻量级的JS框架。jQuery核心js文件才几十kb不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便比如要找到某个DOM对象的相邻元素JS可能要写好几行代码而jQuery一行代码就搞定了再比如要将一个表格的隔行变色jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码并且代码的可读性也比js要强。Ajax操作支持。jQuery简化了AJAX操作后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件例如树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件并且用jQuery插件做出来的效果很炫并且可以根据自己需要去改写和封装插件简单实用。
jQuery内容
1. 选择器 2. 筛选器 3. 样式操作 4. 文本操作 5. 属性操作 6. 文档处理 7. 事件 8. 动画效果 9. 插件 10. each、data、Ajax
使用jQuery必须先下载库文件下载方式 1. 去官网下载https://jquery.cuishifeng.cn/jQuery_selector_context.html https://jquery.com/ 2. bootcdn: https://www.bootcdn.cn/
jQuery版本
1.x兼容IE678,使用最为广泛的官方只做BUG维护功能不再新增。因此一般项目来说使用1.x版本就可以了最终版本1.12.4 (2016年5月20日)2.x不兼容IE678很少有人使用官方只做BUG维护功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x最终版本2.2.4 (2016年5月20日)3.x不兼容IE678只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少PC端用户已经逐步被移动端用户所取代如果没有特殊要求的话一般都会选择放弃对678的支持。
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象那么他就可以使用jQuery里的方法例如$(“#i1”).html()。
$(#i1).html()的意思是获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于 document.getElementById(i1).innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的但是 jQuery对象无法使用 DOM对象的任何方法同理 DOM对象也没不能使用 jQuery里的方法。
一个约定我们在声明一个jQuery对象变量的时候在变量名前面加上$
var $variable jQuery对像
var variable DOM对象
$variable[0]//jQuery对象转成DOM对象 拿上面那个例子举例jQuery对象和DOM对象的使用
$(#i1).html();//jQuery对象可以使用jQuery的方法
$(#i1)[0].innerHTML;// DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()
查找标签
基本选择器 id选择器$(#id) 标签选择器$(tagName) class选择器$(.className) 配合使用$(div.c1) // 找到有c1 class类的div标签 $(div#d1) 所有元素选择器$(*) 组合选择器 $(#id, .className, tagName) $(#d1,.c1,p) # 并列混用 $(div span) # 后代 $(divspan) # 儿子 $(divspan) # 毗邻 $(div~span) # 弟弟 层级选择器 x和y可以为任意选择器 $(x y);// x的所有后代y子子孙孙 $(x y);// x的所有儿子y儿子 $(x y)// 找到所有紧挨在x后面的y $(x ~ y)// x之后所有的兄弟y 基本筛选器
$(ul li:first) # 大儿子
$(ul li:last) # 小儿子
$(ul li:eq(2)) # 放索引
$(ul li:even) # 偶数索引 0包含在内
$(ul li:odd) # 奇数索引
$(ul li:gt(2)) # 大于索引
$(ul li:lt(2)) # 小于索引
$(ul li:not(#d1)) # 移除满足条件的标签
$(div:has(h1))// 找到所有后代中有h1标签的div标签
$(div:has(.c1))// 找到所有后代中有c1样式类的div标签
$(li:not(.c1))// 找到所有不包含c1样式类的li标签
$(li:not(:has(a)))// 找到所有后代中不含a标签的li标签
练习 自定义模态框使用jQuery实现弹出和隐藏功能。 jQuery版自定义版本
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title自定义模态框/titlestyle.cover {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: darkgrey;z-index: 999;}.modal {width: 600px;height: 400px;background-color: white;position: fixed;left: 50%;top: 50%;margin-left: -300px;margin-top: -200px;z-index: 1000;}.hide {display: none;}/style
/head
body
input typebutton value弹 idi0div classcover hide/div
div classmodal hidelabel fori1姓名/labelinput idi1 typetextlabel fori2爱好/labelinput idi2 typetextinput typebutton idi3 value关闭
/div
script srchttps://cdn.bootcss.com/jquery/3.2.1/jquery.min.js/script
scriptvar tButton $(#i0)[0];tButton.onclickfunction () {var coverEle $(.cover)[0];var modalEle $(.modal)[0];$(coverEle).removeClass(hide);$(modalEle).removeClass(hide);};var cButton $(#i3)[0];cButton.onclickfunction () {var coverEle $(.cover)[0];var modalEle $(.modal)[0];$(coverEle).addClass(hide);$(modalEle).addClass(hide);}
/script
/body
/html
属性选择器
[attribute]
[attributevalue]// 属性等于
[attribute!value]// 属性不等于 例子
// 示例
input typetext
input typepassword
input typecheckbox
$(input[typecheckbox]);// 取到checkbox类型的input标签
$(input[type!text]);// 取到类型不是text的input标签
表单筛选器
:text
:password
:file
:radio:text
:password
:file
:radio
:checkbox:submit
:reset
:button
:checkbox:submit
:reset
:button
例子
$(:checkbox) // 找到所有的checkbox
$(input[typetext])----------$(:text)
$(input[typepassword])----------$(:password) 表单对象属性:
:enabled
:disabled
:checked
:selected 例子 找到可用的input标签
forminput nameemail disableddisabled /input nameid /
/form$(input:enabled) // 找到可用的input标签 找到被选中的option
select ids1option valuebeijing北京市/optionoption valueshanghai上海市/optionoption selected valueguangzhou广州市/optionoption valueshenzhen深圳市/option
/select$(:selected) // 找到所有被选中的option$(:checked) # 它会将checked和selected都拿到
$(:selected) # 它不会 只拿selected
$(input:checked) # 自己加一个限制条件
筛选器方法
下一个元素
$(#id).next()
$(#id).nextAll()
$(#id).nextUntil(#i2) 上一个元素
$(#id).prev()
$(#id).prevAll()
$(#id).prevUntil(#i2)
父亲元素
$(#id).parent()
$(#id).parents() // 查找当前元素的所有的父辈元素
$(#id).parentsUntil() // 查找当前元素的所有的父辈元素直到遇到匹配的那个元素为止。
儿子和兄弟元素
$(div).filter(.c1) // 从结果集中过滤出有c1样式类的
$(#id).children();// 儿子们
$(#id).siblings();// 兄弟们
查找 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
$(div).find(p)-----------------等价于$(div p)
筛选 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
$(div).filter(.c1) // 从结果集中过滤出有c1样式类的
等价于 $(div.c1) 补充
.first() // 获取匹配的第一个元素$(div span:first)--------------$(div span).first()
.last() // 获取匹配的最后一个元素$(div span:last)-----------------$(div span).last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素$(div span:not(#d3)) ---------------$(div span).not(#d3)
.has() // 保留包含特定后代的元素去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
