1.JQuery第一天

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;

4.今日练习

5.今日总结