当前位置:编程学习 > JAVA >>

jQuery基础知识

jQuery 
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>trdd") 所有奇数行
 
$("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单选组的第二个元素为当前选中值
&nbs
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,