jquery
jQuery
1.特点:
小巧
功能强
跨浏览器
插件
2.使用
实际是js文件
a)复制js到WebRoot
b)页面<scriptsrc="jquery.js"charset=""></script>可以500%提高开发效率的前端UI框架！
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);可以500%提高开发效率的前端UI框架！
.size()找到多少个对象
varn=$("div").size()
文本框赋值(value)
$("#myid").val(123);
.val()取值
层的内容.innerHTML/.innerText
$("div").html();
$("div").html(123);
$("div").html("<inputtype=button>");
$("div").text("<inputtype=button>");
样式document....style.color="red"
$("div").css("color","red").css("font-size","18");
$("div").css({color:"red","font-size":18});
删除
$("div").remove();删除所有div可以500%提高开发效率的前端UI框架！
添加
父加子:$("div").append("<inputbutton>");
$("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)类选择器
<inputtype=textclass="myclass">可以500%提高开发效率的前端UI框架！
$(".myclass")找多个
b)id选择器
<inputtype=textid="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可以500%提高开发效率的前端UI框架！
$("table>tbody>tr:first")找第一行
$("table>tbody>tr").eq(0)找第一行
$("table>tbody>trdd")所有奇数行
$("table>tbody>tr:even")所有偶数行
子找父
$("tr").parent()
找兄弟
$(a).next()下一个
$(b).prev()上一个
---jQuery对表格tr的操作
functionbh()//序号进行编号
{
jQuery("#t>tr").each(function(i,obj){
obj.cells[0].innerHTML=i+1;
});
}
functionaddRow()//添加一行tr
{
vartr=jQuery("#t>tr:first").clone().appendTo(jQuery("#t"));
tr.find(":text").val("");
tr.find("td").eq(4).html("");//eq(4)第二个文本框
bh();
}
functiondroRow(del)//删除一行tr可以500%提高开发效率的前端UI框架！
{
jQuery(del).parent().parent().remove();
bh();
}
//计算输入文本中数字的结果
functionjs(js)
{
//找到tr
vartr=jQuery(js).parent().parent();
//取数
varsl=tr.find(":text").eq(1).val();
varjg=tr.find(":text").eq(2).val();
tr.find("td").eq(4).html(sl*jg);
}
单选radio取值：jQuery("input[@type=radio][name=ckbb][checked]").val();
<-------------------------------------------------------------
其它看到的：
获取一组radio被选中项的值可以500%提高开发效率的前端UI框架！
varitem=$('input[@name=items][@checked]').val();
获取select被选中项的文本
varitem=$("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);（测试通过）可以500%提高开发效率的前端UI框架！
下拉框select：$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项（错）
$("select[name=sex]option[value="-sel3"]").attr("selected",true);(测试通过)
$("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框
$("#select1")[0].options(index).selected=true;//使第index个option选中
$("#select1")[0].options(3).text//取索引为3的option值