锁定老帖子 主题:jQuery必知必熟基础知识
精华帖 (0) :: 良好帖 (3) :: 新手帖 (6) :: 隐藏帖 (1)
|
|
---|---|
作者 | 正文 |
发表时间:2010-12-31
最后修改:2011-05-15
1.特点: 小巧 功能强 跨浏览器 插件 2.使用 实际是js文件 a) 复制js到WebRoot b) 页面<script src="jquery.js" charset=""></script> 3.核心对象及常用方法和属性 a)名称 jQuery和$ 用$找出来的对象叫jQuery对象 用document找出来的对象叫Dom对象 b)dom和jquery对象转换 jQuery对象.get(0) --->dom对象 $(dom对象)--->jQuery对象 c)jQuery对象方法 .show() 显示 .hide() 隐藏 .toggle() 显示或隐藏切换 $("div").hide(); $("#myid").show(); $(".myclass").show(100); .size() 找到多少个对象 var n = $("div").size() 文本框赋值(value) $("#myid").val(123); .val()取值 层的内容.innerHTML/.innerText $("div").html() ; $("div").html(123); $("div").html("<input type=button>"); $("div").text("<input type=button>"); 样式 document....style.color="red" $("div").css("color","red").css("font-size","18"); $("div").css({color:"red","font-size":18}); 删除 $("div").remove(); 删除所有div 添加 父加子: $("div").append("<input button>"); $("div").append( $("#myid") ); 子加父 $("input").appendTo( $("div") ); 对象属性 $("input").attr("checked",true); 去首尾空格: $.trim(字符串) $("div").each( function(i,obj){} ); $.post(url,function(x){}); $.post(url,{键:值},function(x){}); $.getJSON(url,function(x){//这里x已转成json了,不要用eval}); 克隆 $("div").clone(); 4. 选择器 a) 类选择器 <input type=text class="myclass"> $(".myclass") 找多个 b) id选择器 <input type=text id="myid"> $("#myid") 找一个 相当于:document.getElementById("myid") c) 标记选择器 找多个 $("div,span") 相当于document.getElementsByTagName() d) 表单选择器 $(":text") 所有文本框 $("input[type=text][value='']") $(":radio") 所有单选框 $(":checkbox") 所有复选框 e) 表单属性选择器 $(":checkbox:checked")或$(":checked:checkbox") $(":checked") 找所有选中(单选框和复选框) $(":selected") 找所有选中列表框 f) 层级选择器 父找子 d找c $("table").find("tr") //找子孙都可以 $("table>tbody>tr") 找所有tr $("table>tbody>tr:first") 找第一行 $("table>tbody>tr").eq(0) 找第一行 $("table>tbody>tr:odd") 所有奇数行 $("table>tbody>tr:even") 所有偶数行 子找父 $("tr").parent() 找兄弟 $(a).next() 下一个 $(b).prev() 上一个 ---jQuery对表格tr的操作 function bh() //序号进行编号 { jQuery("#t>tr").each(function(i,obj){ obj.cells[0].innerHTML=i+1; }); } function addRow() //添加一行tr { var tr = jQuery("#t>tr:first").clone().appendTo(jQuery("#t")); tr.find(":text").val(""); tr.find("td").eq(4).html(""); //eq(4)第二个文本框 bh(); } function droRow(del) //删除一行tr { jQuery(del).parent().parent().remove(); bh(); } //计算输入文本中数字的结果 function js(js) { //找到tr var tr=jQuery(js).parent().parent(); //取数 var sl=tr.find(":text").eq(1).val(); var jg=tr.find(":text").eq(2).val(); tr.find("td").eq(4).html(sl*jg); } 单选radio取值:jQuery("input[@type=radio][name=ckbb][checked]").val(); <------------------------------------------------------------- 其它看到的: 获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex = 1; radio单选组的第二个元素为当前选中值 $('input[@name=items]').get(1).checked = true; 获取值: 文本框,文本区域:$("#txt").attr("value"); 多选框checkbox:$("#checkbox_id").attr("value"); 单选组radio: $("input[@type=radio][@checked]").val(); 下拉框select: $('#sel').val(); 控制表单元素: 文本框,文本区域:$("#txt").attr("value",'');//清空内容 $("#txt").attr("value",'11');//填充内容 多选框checkbox: $("#chk1").attr("checked",'');//不打勾 $("#chk2").attr("checked",true);//打勾 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 (错) $("input[@name=radio_s][@value=16]").attr("checked",true);(测试通过) 下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 (错) $("select[name=sex] option[value="-sel3"]").attr("selected",true);(测试通过) $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option $("#sel").empty();//清空下拉框 $("#select1")[0].options(index).selected = true; //使第index个option选中 $("#select1")[0].options(3).text //取索引为3的option值 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-01-01
还行,作为总结、复习的内容是足够了
|
|
返回顶楼 | |
发表时间:2011-01-03
不错,大体上看了一遍,复习了一下Jquery的基础知识!
|
|
返回顶楼 | |
发表时间:2011-01-03
还是看书系统地学习 比较好一些。
|
|
返回顶楼 | |
发表时间:2011-01-03
挺简单明了的
|
|
返回顶楼 | |
发表时间:2011-01-03
谢谢支持... 会继续更新的 这些都是必须懂得的!
|
|
返回顶楼 | |
发表时间:2011-01-03
不错,可以复习一下基础知识。好久没用jq了
|
|
返回顶楼 | |
发表时间:2011-01-03
jquery 的minified and Gziped版本只有26K,可以接受的大小。
|
|
返回顶楼 | |
发表时间:2011-01-04
很基础,总结的很好
|
|
返回顶楼 | |
发表时间:2011-01-04
经常总结是成功必经之途啊!祝福楼主!
|
|
返回顶楼 | |