#### 一、jquery简介 jquery是一个免费的、开源的js库，也是目前使用最广泛的js库 jquery极大的方便完成web前端的相关操作，比如节点操作，元素操作，事件绑定，ajax操作，还可以解决大多数浏览器兼容性的问题 #### 二、jQuery选择器 jquery选择器可以获取html元素为了学习选择器，先了解一个知识点:jquery通过css方法来修改样式描述 |案例 |:--:|:--:| id选择器| $("#div").css("background","red"); 类选择器| $(".div").css("background","red"); 标签选择器| $("div").css("background","red"); 属性选择器|$([name=nice”]").css("background","red"); 后代选择器| $("#div p").css("background","red"); 子选择器| $("#div>p").css("background","red"); 并列选择器| $("#div,.div").css("background","red"); first last|$("div:first").css("background","red"); eq 通过索引获取元素|$("div:eq(2)").css("background","red"); 代码实现： ```JavaScript ``` #### 三、jquery元素操作通过jquery可以操作控制元素的样式、文本、属性描述 |案例 |:--:|:--:| 获取子元素| var childen = $("#div").children(); 获取上一个兄弟元素| var prev = $("#div").prev(); 获取下一个兄弟元素| var next = $("#div").next(); 获取同层除了自己所有元素| var siblings = $("#div").siblings(); 获取父元素| var parent = $("#inner").parent(); 获取先祖元素| var parents = $("#inner").parents(); 代码实现： ```JavaScript ``` #### 四、jquery样式操作 1、css()取出或设置css样式 css方法如果只指出属性，没有给值，可以获取对应属性的值 css方法如果给出属性和值，就修改样式 css还支持修改多个样式 2、addClass,removeClass,toggleClass通过添加和减去class属性值来修改样式代码实现： ```JavaScript ``` #### 五、jquery属性操作 1、attr()取出或设置某个属性的值 2、removeattr删除属性代码实现： ```JavaScript ``` #### 六、jquery文本操作 1、html()取出或设置html内容 2、text()取出或设置text内容代码实现： ```JavaScript ``` #### 七、相关尺寸 1、取出或设置元素的高度和宽度，width() ，height() 2、取出或设置元素的相对于文档的偏移坐标量，offset() 代码实现： ```JavaScript ``` #### 八、动画效果 1、hide(),show(),toggle()设置显示和隐藏 jquery动画函数普通可以接收一个fast，slow，normal，表示动画的速度快慢的描述。当然也可以设置时间单位是毫秒 2、fadeIn(),fadeOut(),fadeToggle()设置元素淡入淡出 3、slideDown()，slideUp()，slideToggle以滑动的方式显示和隐藏元素代码实现： ```JavaScript ``` #### 九、自定义动画 1、animate()方法设置自定义动画语法：$(“选择器”).animate(styles,speed,easing,callback) 参数| 描述 |:--:|:--:| styles |必需，规定产生动画的css样式和值 speed |可选，规定动画的速度，默认是nomal，如果是数字，单位是毫秒 easing| 可选，规定不同的动画中设置速度的easing函数，内置的函数有:swing和linear。 callback| 可选，animate函数执行完之后，要执行的函数 2、stop()停止动画 3、delay()延迟动画代码实现： ```JavaScript ``` #### 十、jQuery关于事件 jquery事件与js类似，但是有个大的变动 1、事件的名称由on事件变成了事件名称 2、事件的调用由=编程了() 3、jquery所有事件和js事件一样需要函数 **jquery常用的事件** 表单与键盘事件事件| 描述 |:--:|:--:| blur| 表单失去焦点 focus |表单获取焦点 submit| 表单提交 change |表单发生修改 keydown| 键盘按下 keyup |键盘弹起鼠标常用事件事件| 描述 |:--:|:--:| click| 鼠标单击事件 mouseover| 鼠标移动到对象上面 mousemove| 鼠标移动 mouseout| 鼠标移除 mousedown |鼠标按下 mouseup| 鼠标弹起代码实现： ```JavaScript ``` #### 十一、jquery节点操作 1、创建节点 2、插入节点 append()在现在元素的内部，从后面插入元素 prepend在现在元素的内部，从前面插入元素 after()在现有元素的外部，从后面插入元素，作为兄弟节点 before()在现有元素的外部，从前面插入元素，作为兄弟节点 3、删除节点 $(element).remove()删除当前元素 $(element).empy()清空 4、克隆节点 $(element).clone(true) 代码实现： ```JavaScript ``` #### 十二、boostrap框架 1、boostrap简介 boostrap是一个成熟的web前端框架，涵盖了页面开发的大部分CSS布局，js的特效，是前端快速开发的必备框架 boostrap官网https://www.bootcss.com/ 在常规中，先编写html，然后编写样式，接着编写html的功能 bootstrap与这种开发不同，先定义好样式和特效，如果需要直接class和其他属性调用，在学习bootstrap框架的时候，我们需要掌握的常见的bootstrap类名和其他属性 2、栅格系统栅格系统是bootstrap推出的一种快速的页面布局方案栅格系统将页面宽度分为12份，开发者只需要设置每一份是多少间距就可以了，栅格系统可以快速的进行布局 1、栅格系统必须在container或者container-fluid下，如果不在这两个下面，不生效，container是固定宽度，如果浏览器比他宽就居中显示，container-fluid是100%宽度 2、删除系统一行划分为12列，如果所有元素没有占满12份也可以布局，如果超过，另起一行 3、栅格系统可以使用row进行垂直划分 4、bootstrap可以适用大部分的终端（手机端，平板，电脑，投影仪）的布局