本帖最后由 小石姐姐 于 2018-5-4 09:52 编辑
day05_JQuery
gt大于 ,lt小于 even奇数 odd偶数 JS的工具类(框架),封装了JS,通过调用方法简化代码,提高开发效率 开发中通常使用JS框架. JS中常用的框架: JQuery(几十kb),Extjs,DWR... JQ的语法: JQ.min.js 是压缩后的文件 JQuery===$ 预先定义好了一个对象 1.引入文件 2.入口函数 $( function() ) {}; 等同于JS中的常规写法 window.onload 区别: 都是页面加载完之后执行,可以执行多次.效率比window.onload要高. 开发中另一种写法: $(document).ready(function(){ }); 如何得到JJQ对象: $(); JQ核心函数, 括号中可以写选择器,数组,JS对象 主要: JS对象转JQ对象 使用JS完成定时弹出广告JQ的选择器:选择器: 查找元素,返回JQ对象,调用JQ的方法. 基本选择器: id选择器 $("#id") 类选择器 $(". 类名")标签名 元素选择器: $("元素名称") 通配符选择器: $(“*”) 并列选择器: $(“选择器,选择器,选择器”) 层级选择器: 后代选择器: 使用空格, 所有后代包含孙子及以下的元素. 子元素选择器: 使用>第一层的元素(儿子). 下一个元素: 使用+ 下一个同辈元素 兄弟元素: 使用~ 后面的所有的同辈元素 内容选择器: 属性选择器: $("div['id']"); [attribute=value]属性=属性值 表单对象属性:checked selected JQ表格隔行换色案例:改变页面元素样式的方法: add.Class(),remove.Class()和css方法 2. 样式事先定义好了的(样式需求多的时候): 1.引入样式文件< style>< /style> 2.$("#two tbody tr : odd").addClass("odd") 1. 样式需求少的情况: $("#one tr: gt(0): odd" ).css("background-color","red"); JQ复选框的全选和全不选:JQ对属性操作的方法: attr();旧版本不更新的 prop();新版本使用的 页面中添加复选框 引入JQ 的JS 编写JQ的入口函数 点击上面的复选框获得下面的多有复选框的值 JQ省市二级联动:append(); 在某个元素后添加内容 appendTo(); 将某个元素添加到另一个元素后 remove(); 将某个元素移除 JQ两种遍历方式: 1.$.each(objects(数组), function( i, n){ }); 2.$("").each(function ( i , n){ }); 下拉列表的左右选择:JQ选择器: 表单对象属性: enabled, disabled ,checked, ,selected JQ事件切换: toggle(); 单击事件的切换 hover(); 鼠标悬停的切换, 如果只是改变样式,也可以用CSS的伪类. JQ常用事件: 事件是函数,方法blur 失去焦点 change 下拉列表事件 click 单击事件 dblclick 双击事件 error focus 获得焦点,单击 focusin focusout keydown keypress keyup mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit unload HTML:代码/文本/值$("#test1").html(); 括号里什么都不写,获得test1中的所有代码. $("#test1").html("< span>覆盖test1中的所有内容< /span>");可以识别标签 $("#text1")text(); 获得text1中的文本内容. $("#text1")text();替换text1中的文本内容,但不识别标签,只识别字符串 $("#value=name").val(); 获得value的值.即获得文本的内容 $("#value=name").val("asfddgd"); 设置文本内容. 案例五:下拉列表的左右选择:案例一,JQ完成表单校验:JQ查找: 找到指定的元素 children() find() parent() JQ事件处理: trigger和triggerHandler区别: trigger会触发浏览器默认的同名行为blur,光标消失 on, bind: 事件的绑定 $("#text1").on("click dblclick" , function(){ 多个事件同时触发同一个函数,用空格隔开, var a= $(this).html(); alert(a); }); delegate:事件的委派,为还没有发生的时间,子元素触发单击事件委派给父元素执行. $("#eqer") . delegate(". aaa","click",function(){ $(this).html("< font color='red'>时间的委托< /font>") this指的是发生在子元素身上的.aaa }) class="required dsad",可以写多个,写样式.为了找到这个元素,不一定定义该样式. this事件发生在谁身上它就代表谁. append追加,往后追加.
|