jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件
注意：以下部分问题不能实现效果，因该是单词拼写错误(少个t)或者没有加引号(“swing”)。。。
jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
jquery的口号和愿望Write Less, Do More（写得少，做得多）
1、 官方网站
2、 版本下载
jquery加载
将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的window.onload 更快。
可以简写为：
jquery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。$( " #test " ).html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 这段代码等同于用DOM实现代码： document.getElementById( " test " ).innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 约定：如果获取的是jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery对象 var variable = DOM对象$variable[ 0 ]：jquery对象转为dom对象$( " #msg " ).html(); $( " #msg " )[ 0 ].innerHTML
jquery的基础语法：$(selector).action()
参考：http://jquery.cuishifeng.cn/
$(document) // 选择整个文档对象 $( ' li ' ) // 选择所有的li元素 $( ' #myId ' ) // 选择id为myId的网页元素 $( ' .myClass ' ) // 选择class为myClass的元素 $( ' input[name=first] ' ) // 选择name属性等于first的input元素 $( ' #ul1 li span ' ) // 选择id为为ul1元素下的所有li下的span元素
对选择集进行修饰过滤(类似CSS伪类)
$( ' #ul1 li:first ' ) // 选择id为ul1元素下的第一个li $( ' #ul1 li:odd ' ) // 选择id为ul1元素下的li的奇数行 $( ' # ul1 li:eq(2) ' ) // 选择id为ul1元素下的第3个li $( ' #ul1 li:gt(2) ' ) // 选择id为ul1元素下的前三个之后的li $( ' #myForm :input ' ) // 选择表单中的input元素 $( ' div:visible ' ) // 选择可见的div元素
表单选择器
:enabled :disabled : checked :selected
对选择集进行函数过滤
$( ' div ' ).has( ' p ' ); // 选择包含p元素的div元素 $( ' div ' ).not( ' .myClass ' ); // 选择class不等于myClass的div元素 $( ' div ' ).filter( ' .myClass ' ); // 选择class等于myClass的div元素 $( ' div ' ).first(); // 选择第1个div元素 $( ' div ' ).eq( 5 ); // 选择第6个div元素
选择集转移
$( ' div ' ).prev( ' p ' ); // 选择div元素前面的第一个p元素 $( " div " ).prevAll()$( " div " ).prevUntil() // 直到找到符合括号里面的条件的停止 $( ' div ' ).next( ' p ' ); // 选择div元素后面的第一个p元素 $( " .test " ).nextAll()$( " .test " ).nextUntil()$( ' div ' ).closest( ' form ' ); // 选择离div最近的那个form父元素 $( ' div ' ).parent(); // 选择div的父元素 $( " .test " ) .parents();所有级别的父级别标签$( " .test " ).parentUntil() ；所有级别的父级别标签，直到。。。$( ' div ' ).children(); // 选择div的所有子元素 $( ' div ' ).siblings(); // 选择div的同级元素 $( ' div ' ).find( ' .myClass ' ); // 选择div内的class等于myClass的元素
jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值操作行间样式
// 获取div的样式 $( " div " ).css( " width " );$( " div " ).css( " color " );// 设置div的样式 $( " div " ).css( " width " , " 30px " );$( " div " ).css( " height " , " 30px " );$( " div " ).css({fontSize: " 30px " ,color: " red " }); 特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。操作样式类名
$( " #div1 " ).addClass( " divClass2 " ) // 为id为div1的对象追加样式divClass2 $( " #div1 " ).removeClass( " divClass " ) // 移除id为div1的对象的class名为divClass的样式 $( " #div1 " ).removeClass( " divClass divClass2 " ) // 移除多个样式 $( " #div1 " ).toggleClass( " anotherClass " ) // 重复切换anotherClass样式
jquery属性操作
1、html() 取出或设置html内容
// 取出html内容var $htm = $( ' #div1 ' ).html();// 设置html内容$( ' #div1 ' ).html( ' 添加文字 ' ); 2、text() 取出或设置text内容
// 取出文本内容var $htm = $( ' #div1 ' ).text();// 设置文本内容$( ' #div1 ' ).text( ' 添加文字 ' ); 3、attr() 取出或设置某个属性的值
// 取出图片的地址var $src = $('#img1').attr('src');// 设置图片的地址和alt属性$('#img1').attr({ src: "test.jpg", alt: "Test Image" }); 绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this)}) 事件委派
$(父标签).on("click",".item",function(){}); --- 解决添加子元素的绑定事件 $(标签).off(事件) --- 解除事件jquery特殊效果
1 fadeIn() 淡入 2 3 $btn.click(function(){ 4 5 $('#div1').fadeIn(1000,'swing',function(){ 6 alert('done!'); 7 }); 8 9 });10 11 fadeOut() 淡出12 fadeToggle() 切换淡入淡出13 hide() 隐藏元素14 show() 显示元素15 toggle() 依次展示或隐藏某个元素16 slideDown() 向下展开17 slideUp() 向上卷起18 slideToggle() 依次展开或卷起某个元素 尺寸1、获取和设置元素的尺寸相关、滚动事件
width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
offset()
3、获取可视区高度
$(window).height();
4、获取页面高度
$(document).height();
5、获取页面滚动距离
$(document).scrollTop(); $(document).scrollLeft();
6、页面滚动事件
$(window).scroll(function(){ ...... }) jquery事件
事件函数列表：
blur() 元素失去焦点focus() 元素获得焦点change() 表单元素的值发生变化click() 鼠标单击dblclick() 鼠标双击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave事件指定处理函数mouseup() 松开鼠标mousedown() 按下鼠标mousemove() 鼠标在元素内部移动keydown() 按下键盘keypress() 按下键盘keyup() 松开键盘load() 元素加载完毕ready() DOM加载完成resize() 浏览器窗口的大小发生改变scroll() 滚动条的位置发生变化select() 用户选中文本框中的内容submit() 用户递交表单toggle() 根据鼠标点击的次数，依次运行多个函数unload() 用户离开页面
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止$(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function() { alert('father'); }); $box2.click(function() { alert('son'); }); $box3.click(function(event) { alert('grandson'); event.stopPropagation(); }); $(document).click(function(event) { alert('grandfather'); });})...... 阻止默认行为
阻止右键菜单$(document).contextmenu(function(event) { event.preventDefault();}); 合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用// event.stopPropagation();// event.preventDefault();// 合并写法：return false;
jquery元素节点操作
创建节点
var $div = $(' ');var $div2 = $(' 这是一个div元素 '); 插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素var $span = $('这是一个span元素');$('#div1').append($span);...... 2、prepend()和prependTo()：在现存元素的内部，从前面插入元素
3、after()和insertAfter()：在现存元素的外部，从后面插入元素
4、before()和insertBefore()：在现存元素的外部，从前面插入元素
删除节点
$('#div1').remove(); 滚轮事件与函数节流
jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。函数节流
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。 1 2 3 4 5整页滚动 6 7 8 9 75 76 7778 79127 1288088 89818782
83 Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。 84 85869098 999196 9792
93 2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 9495100109 110101108102
103 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。104 105 106107111118 119112117113
114 Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。115116120124 125 126121123122
- 129 130 131 132 133 134