jq选择器

Jquery

[亡魂溺海] 提交于 2019-12-01 16:21:45
目录 1. 查找标签 1.1 基本选择器 1.2 层级选择器 1.3 基本筛选器 1.4 属性选择器 1.5 表单筛选器 2. 筛选器方法 3. 操作标签 3.1 样式操作 3.2 位置操作 3.3 尺寸 3.4 文本操作 3.5 属性操作 3.6 文档处理 4. 事件 4.1 常用事件 4.2 事件绑定 4.3 移除事件 4.4 阻止后续事件执行 4.5 阻止事件冒泡 4.6 页面载入 4.7 事件委托 5. 动画效果 1. 查找标签 1.1 基本选择器 // id选择器 var aEle = document.getElementById('a') // js获取标签 aEle // <div class=​"div" id=​"a">​…​</div>​ var $aEle=jQuery('#a'); // jq获取标签 // 等同于 var $aEle=$('#a'); $aEle // k.fn.init [div#a.div] var aELe = $aEle[0]; // jq对象变js对象 aELe // <div class=​"div" id=​"a">​…​</div>​ var $a1Ele = $(aEle) // js对象变jq对象 $a1Ele // k.fn.init [div#a.div] // 标签选择器 $('div'); // k.fn

07 前端--JQuery

妖精的绣舞 提交于 2019-12-01 13:54:25
目录 一、JQuery介绍 二、JQuery的优势 三、JQuery 内容 四、JQuery对象 五、JQuery创建对象 六、JQuery的基础语法 6.1 基本元素选择器 6.2 基本元素筛选器 七、属性选择器 八、筛选器方法 8.1 查找(find) 8.2 筛选(filter) 九、表单元素选择器 十、表单对象属性 十一、操作标签 11.1 样式操作(CSS) 11.2 位置操作 11.3 尺寸操作 11.4 文本操作 11.5 属性操作 11.6 porp和attr的区别 11.7 文档处理 十二、事件 12.1 常用事件 12.2 事件绑定 12.3 移出事件 12.4 阻止后续事件执行 12.5 组织事件冒泡 12.6 页面加载 12.7 JQ页面加载DOM页面加载的区别 12.8 事件委托 十三、动画效果 十四、each 一、JQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“ 二、JQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器

006 前端基础之Jquery

冷暖自知 提交于 2019-12-01 13:51:21
目录 一、JQuery介绍 二、JQuery的优势 三、JQuery 内容 四、JQuery对象 五、JQuery创建对象 六、JQuery的基础语法 6.1 基本元素选择器 6.2 基本元素筛选器 七、属性选择器 八、筛选器方法 8.1 查找(find) 8.2 筛选(filter) 九、表单元素选择器 十、表单对象属性 十一、操作标签 11.1 样式操作(CSS) 11.2 位置操作 11.3 尺寸操作 11.4 文本操作 11.5 属性操作 11.6 porp和attr的区别 11.7 文档处理 十二、事件 12.1 常用事件 12.2 事件绑定 12.3 移出事件 12.4 阻止后续事件执行 12.5 组织事件冒泡 12.6 页面加载 12.7 JQ页面加载DOM页面加载的区别 12.8 事件委托 十三、动画效果 十四、each 一、JQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“ 二、JQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器

前端之JQuery

萝らか妹 提交于 2019-12-01 13:34:53
JQuery 介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“ 优势: 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

一篇文章教会你jQuery应用

≯℡__Kan透↙ 提交于 2019-12-01 12:51:56
一  认识jQuery   jQuery是JavaScript Query的缩写形式。jQuery是一款非常优秀的JavaScript库,即便是MVVM框架盛行的今天,也有超过半数的网页及应用直接或间接的使用了jQuery。jQuery的设计理念是“Write Less, Do More“,即写的更少,做的更多!使用jQuery可以大大简化我们的JS代码,从而提高开发效率。   jQuery现在有3个大的版本,分别是1.x,2.x,3.x。你可以从 jQuery官方网站下载 需要的版本,然后从本地引入到自己的项目,也可以使用 CDN 引入。在你下载jQuery时一般有两个可选的版本,一个是压缩版(不包含换行和空格,体积更小,多用于实际项目开发),另一个是未压缩版(包含换行和空格,体积稍大,多用于学习和测试)。 1 <script src="jquery-1.12.4.js"></script> 2 <!--本地引入--> 3 <script src="//code.jquery.com/jquery-1.12.4.js"></script> 4 <!--CDN引入-->   另外,jQuery从第二个大的版本开始,为了优化网络响应和使语法更加简洁,抛弃了对IE6、7、8的支持,并且从2.1.0开始,压缩版本的文件中也不再包含注释信息了。为了获得更好的兼容性

前端之Jquery

风格不统一 提交于 2019-12-01 09:41:46
前端之Jquery jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 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插件做出来的效果很炫

小菜鸟之HTML第三课

狂风中的少年 提交于 2019-12-01 06:46:21
jquery的引入 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery的引入</title> 6 <!--引入(导入)jquery jar包--> 7 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 8 <script type="text/javascript"> 9 //将脚本写在这里 10 //jq的基本语法 11 /* $("选择器或者对象").ready(function () { 12 13 }); 14 var $doc=$(document 或者选择器) :表示将javascript对象变成 jq对象 15 $doc可以调用jq的一些方法和属性 16 17 */ 18 // 第一个jq的使用,输出警示框 19 $(document).ready(function () { 20 //选择器 21 //docuemnt.getElementById("#idname") 22 $("#idname").show(function () { 23 alert("show alert"); 24 25 }); 26 }); 27 28 //jq简写 29 $

jquery介绍

萝らか妹 提交于 2019-11-30 07:57:52
jquery介绍 jquery的优势 1.js代码对浏览器的兼容性做的更好了 2.隐式循环 3.链式操作 jquery是什么? 高度封装了js代码的模块 封装了dom节点 封装了操作dom节点的简便方法 jquery的导入 https://code.jquery.com/jquery-3.4.1.js 未压缩版 https://code.jquery.com/jquery-3.4.1.min.js 压缩版 下载:保存在本地文件里 引入:<script src="jquery3.4.1.min.js"></script> $和jQuery的关系 $就是jQuery名字的简写,实际上是一回事儿 jquery对象和dom对象的关系和转换 jquery封装了dom dom转成jquery : jQuery(dom对象) $(dom对象) jquery转成dom : jq对象[index] jquery选择器 基础选择器 #id选择器 .类选择器 标签选择器 *通用选择器 $('#city') k.fn.init [ul#city]0: ul#citylength: 1__proto__: Object(0) $('.box') k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn

前端笔记整理

人走茶凉 提交于 2019-11-30 07:46:27
目录 内容回顾 jQuery jq对象的循环问题 标签分类 html标签,页面.<html lang="en"英语或zh-cn中文> head标签,不可见,对body内标签的修饰,没有body就没有head title标签,页面标题 meta标签 声明编码 body标签 能直接写内容 img标签 src='图片地址' a标签 href="超链接地址" ul无序列表 ol有序列表 dl自定义列表 table表格 p标签 段落,上下加空白行以区分.文本级标签,内部不能再嵌套块级 div 普通块级标签,用的最多,用head修饰 hr单笔和,分割线 Form表单 action:交互内容提交地址 input:输入 text普通文本. password密文 radio单选按钮,跟选项是分开的.通过name属性来分组.组内单选 checkbox 多选按钮 input的type,submit按钮可用来提交.放在form里的普通button按钮同效 file传文件,date日期, input的button属性,是form里的普通按钮. hidden隐藏reset重置 lable: for属性,点击lable的内容,for的id获取焦点 textarea:文本框 select下拉式选择框. option每个选项 selected默认选中 选择器 #id 通过id选择 span 通过标签类型选 .自定义

Jquery

一世执手 提交于 2019-11-30 06:55:11
Jquery 1.jquery介绍 为什么要用jquery jquery的两大特点 链式编程:比如 .show() 和 .html() 可以连写成 .show().html() 。 隐式迭代:隐式 对应的是 显式。隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用。 什么是jquery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率。 js库是把我们常用的复杂功能封装到简单的方法中,我们用的时候,将库直接引入然后调用方法即可。 初期,主要学习如何使用jQuery操作DOM,其实就是学习jQuery封装好的那些功能API。 这些API的共同特点是:几乎全都是方法。所以,在使用jQuery的API时,都是 方法调用 ,也就是说要加小括号(),小括号里面是相应的参数,参数不同,功能不同。 版本说明 jQuery 有三个大版本: 1.x版本:最新版为 v1.11.3。 2.x版本:最新版为 v2.1.4(不再支持IE6、7、8)。 3.x版本。 2.jquery的使用 使用 jQuery 的基本步骤 下载 :jQuery有两个文件,一个是 jquery-3.4.1.js (未压缩版),一个是 jquery-3.4.1.min.js (压缩版,推荐项目上线时使用) 关于jQuery的相关资料: