JQuery第一天
1.学习目标
熟练掌握Jquery基本语法-Jquery的语法是简化DOM： 单词过长，有兼容性，提供的功能比较少(动画) 掌握JQuery实现页面中常见动效. //怎么找到工作--------面试技巧的问题 //找到工作怎么干的下去----技术能力(后台管理系统(vue+小程序+app)) bootstrap的使用: 掌握常见的样式类: container版心 row一行, 栅格的设备类 col-设备-n 表单: form-group form-control form-inline 表格: table table-hover 按钮: btn btn-primary btn-waring 隐藏显示类: hidden-xs visible-lg 掌握常见的js特效: 弹框,tab菜单,轮播图,下拉菜单,模态框 框架的目的:提供一堆功能给你用,你需要就用. webAPI: ECMAScript(js语法) DOM(元素操作) BOM(浏览器操作) 1.找标签 document.getElementById() 2.加事件 onclick onmouseenter onmouseleave ondblclick 3.修改内容,修改属性,修改样式 innerText innerHTML 标签.属性名 标签.style.属性名=属性值 标签.className
2.知识讲解
1.JQuery介绍
1.Jquery是一个JS库,就是别人写好了一堆函数给你用. 2.使用步骤: 1.去官网下载Jquery.js 2.引入到当前页面 3.查看帮助文档,学习Jquery如何使用. 注意： JS的引入，外链和内嵌js不能混合使用 Jquery-版本号-min.js min表示是压缩版本。
2.JS和JQuery的区别
JQuery就是用JS写的一个工具库，帮助我们简化了JS的复杂代码。类似于中文：繁体和简体， JS是繁体，JQ是简体 js的入口函数: window.onload=function(){} Jquery的入口函数 $(function(){}) $() 找标签: 条件可以是各种各样的css选择器 click() 点击事件,事件操作是一个匿名函数,放在click的括号中. css() 修改css样式使用大括号可以写多个样式属性 $(this) 表示当前标签它自己 //简化了js的基本语法 //添加了动画 //自带遍历效果.(for)
1.找 标签
$('#box') id选择器 $('.box') 类选择器 $('div') 标签选择器 $('.box li') 后代选择器 $('.box > a') 子代选择器 $('.box, .one') 并集选择器 选择器筛选 $('.box li:first') 第一个li $('.box li:last') 最后一个li $('.box li:eq(2)') 第3个li(索引从0开始) $('.box li:gt(3)') 索引大于3的li $('.box li:lt(3)') 索引小于3的li $('.box li:even') 偶数li (因为索引从0开始，所以显示相反) $('.box li:odd') 奇数li //方法找标签 $('.box li').eq(0) 第一个li $('.box li').first() 第一个li $('.box li').last() 最后一个li //表单筛选 $('.box input:text') input中是text的标签 $('.box input:submit') input中是radio的标签 $('.box input:password') input中被选中的标签 //关系选择器 $('.box').parent() 父元素 $('.box').children(条件) 所有子元素 $('.box').siblings(条件) 所有兄弟元素 $('.box').next() 下一个元素 $('.box').nextAll() 下面所有的元素 $('.box').prev() 上一个元素 $('.box').prevAll() 上面所有元素
2.加事件
标签.click(function(){}); 标签.mouseover() 标签.mouseout() 标签.mousemove() 标签.hover() 其他类似 键盘事件(最好是绑定在window上) keyup keydown 鼠标事件 mouseup mousedown 获得焦点失去焦点事件等等 foucs blur //change事件
3.改样式
//样式操作 标签.css('属性名','属性值'); 标签.css({属性名:属性值,属性名:属性值}); //类的操作 标签.addClass('current') 标签.removeClass('current') 标签.toggleClass('current')
4.改内容
//内容操作 标签.html() 修改内容 标签.val() 修改表单的value值 标签.text() 修改文字内容
5.改属性
//自定义属性操作 标签.attr('属性名'，'属性值'); 标签.removeAttr('属性名'); 标签.prop('属性名'，'属性值'); 注意： prop方法用于获取类似于checked这种标签独有的属性，Jquery未封装 属性名等于属性值的: checked=checked selected=selected 在JS中获取状态为true fasle;
