首页 > 代码库 > jQuery必知必熟基础知识

jQuery必知必熟基础知识

2024-07-27 07:40:18   220人阅读

jQuery 
1.特点:

小巧

功能强

跨浏览器

插件


2.使用

实际是js文件

a) 复制js到WebRoot

b) 页面<script src=http://www.mamicode.com/"jquery.js" charset=""></script>  精心开发5年的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);  精心开发5年的UI前端框架！


.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  精心开发5年的UI前端框架！ 


添加

父加子: $("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">  精心开发5年的UI前端框架！ 

$(".myclass") 找多个

b) id选择器 

<input type=text id="myid">

$("#myid") 找一个

相当于:document.getElementById("myid")

c) 标记选择器 找多个

$("div,span")

相当于document.getElementsByTagName()

d) 表单选择器

$(":text") 所有文本框

$("input[type=text][value=http://www.mamicode.com/‘‘]")


$(":radio") 所有单选框

$(":checkbox") 所有复选框

e) 表单属性选择器

$(":checkbox:checked")或$(":checked:checkbox")

$(":checked") 找所有选中（单选框和复选框)

$(":selected") 找所有选中列表框

f) 层级选择器

父找子 d找c

$("table").find("tr") //找子孙都可以

$("table>tbody>tr") 找所有tr  精心开发5年的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的操作

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  精心开发5年的UI前端框架！

{

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被选中项的值  精心开发5年的UI前端框架！

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=http://www.mamicode.com/2的项目为当前选中项 （错）

$("input[@name=radio_s][@value=http://www.mamicode.com/16]").attr("checked",true);（测试通过）  精心开发5年的UI前端框架！


下拉框select： $("#sel").attr("value",‘-sel3‘);//设置value=http://www.mamicode.com/-sel3的项目为当前选中项 （错）


$("select[name=sex] option[value=http://www.mamicode.com/"-sel3"]").attr("selected",true);(测试通过)



$("<option value=http://www.mamicode.com/‘1‘>1111").appendTo("#sel")//添加下拉框的option

$("#sel").empty()；//清空下拉框


$("#select1")[0].options(index).selected = true; //使第index个option选中

$("#select1")[0].options(3).text //取索引为3的option值

jQuery必知必熟基础知识


联系
我们