00-jQuery-讲课教案.pptVIP

jQuery 事件切换 hover(over, out) 鼠标移入移出事件mouseover mouseout toggle(f1, fn2, [fn3, fn4, ...]) 每次点击后依次调用函数 jQuery 属性操作-class类 2.1 addClass(class) 为每个匹配的元素添加指定的类名 2.2 removeClass(class) 从所有匹配的元素中删除全部或者指定的类 2.3 toggleClass(class) 如果存在（不存在）就删除（添加）一个类 jQuery 属性操作-html代码 innerHTML 3.1 html() 取得第一个匹配元素的html内容 3.2 html(val) 设置每一个匹配元素的html内容 jQuery 属性操作-文本 4.1 text() 取得所有匹配元素的内容 4.2 text(val) 设置所有匹配元素的文本内容，与 html() 类似, 但将编码 HTML (将 和 替换成相应的HTML实体). jQuery CSS样式操作-CSS 1.1 css(name) 访问第一个匹配元素的样式属性 1.2 css(properties) 把一个“名/值对”json对象设置为所有匹配元素的样式属性 这是一种在所有匹配的元素上设置大量样式属性的最佳方式 1.3 css(name,value) 在所有匹配的元素中，设置一个样式属性的值 jQuery CSS样式操作-宽高 3.1 height() 取得第一个匹配元素当前计算的高度值 3.2 height(val) height(100) 为每个匹配的元素设置CSS高度(hidth)属性的值 如果没有明确指定单位（如：em或%），使用px 3.3 width() 取得第一个匹配元素当前计算的宽度值（px）。 3.4 width(val) 为每个匹配的元素设置CSS宽度(width)属性的值 jQuery 属性操作-值 5.1 val() 获得第一个匹配元素的当前值 在 jQuery 1.2 中,可以返回任意元素的值了。 包括select。如果多选，将返回一个数组， 其包含所选的值 5.2 val(val) 设置每一个匹配元素的值 check,select,radio等都能使用为之赋值 jQuery 属性操作-值 单选按钮选中： $(单选按钮列表).val([value]); 下拉列表选中 $(下拉列表).val([val1,val2,val3]); 复选框选中 $(复选框列表).val([val1,val2,val3]); jQuery 项目案例 单选、复选、下拉列表设置选中情况 jQuery 通过val()获得单选、复选框、下拉列表的值 jQuery 案例-复选框操作 jQuery 作业案例-通过jquery选择器和相关方法实现以下效果 图片自动放大、缩小案例 放大 缩小 jQuery jQuery符号“$”的由来 var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor enhanced return new jQuery.fn.init( selector, context ); }, _jQuery = window.jQuery, _$ = window.$, // Expose jQuery to the global object return (window.jQuery = window.$ = jQuery); jQuery $符号冲突解决 var jq = $.noConflict(); jq(function(){ jq([name=username]).attr(value,123); }); jQuery jQuery对象创建 return new jQuery.fn.init(selector,context,rootjQuery); 先执行： var jQuery = function( selector, context ) 再执行： jQuery.fn = jQtotype 后执行：jQtotype=jQuery.fn 合并后代码为：jQtotype=jQuery.fn=jQtotype 所有挂载到jQuery.fn的方法，相当于挂载到了jQtotype，即挂载到了jQuery函数上(一开始的jQuery=function(s,c))，但是最后都相当于挂载到了jQtotype，即相当于挂载到了一开始的j