`
huoquan
  • 浏览: 27091 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类

jQuery必知必熟基础知识

阅读更多

jQuery 
1.特点:

小巧

功能强

跨浏览器

插件


2.使用

实际是js文件

a) 复制js到WebRoot

b) 页面<script src="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() 找到多少个对象

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  可以500%提高开发效率的前端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">  可以500%提高开发效率的前端UI框架!  

$(".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  可以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的操作

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  可以500%提高开发效率的前端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被选中项的值  可以500%提高开发效率的前端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=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);(测试通过)



$("<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值

0
0
分享到:
评论

相关推荐

    jQuery基础核心知识

    详细介绍了jQuery的一些核心知识以及基础,理解jQuery

    jquery基础知识

    **jQuery基础知识** jQuery是一款强大的JavaScript库,它极大地简化了JavaScript编程,使得网页动态化和交互变得更加容易。在web应用与开发领域,jQuery已经成为一个不可或缺的工具,尤其在处理DOM操作、事件处理、...

    jquery基础教程中文版2015

    **jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程,旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...

    jquery入门基础知识

    ### jQuery入门基础知识详解 #### 一、jQuery简介与特点 **jQuery** 是一款非常流行的 JavaScript 库,它的设计目标是让 Web 开发变得更加简洁高效。根据文档中的介绍,我们可以了解到以下几点关键信息: 1. **...

    最全面的jQuery基础知识

    看完“最全面的jQuery基础知识”文件包,你就能详细了解jQuery的代码规则。 文件包更是你进行jQuery开发的参考手册。 文件包内实例丰富,将其拷贝到单独的html文件中即可执行。 文件包包含一个模板文件:template....

    jquery知识点总结.md

    jquery

    jQuery 基础知识 基础Demo

    **jQuery基础知识** jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。它的设计理念是“写得更少,做得更多”,使得网页开发变得更加高效和简便。 ### 1. ...

    jQuery基础教程笔记jQuery基础教程笔记

    jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记

    jQuery基础.pptx

    1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? jQuery是一个JavaScript函数库 轻量级,“写的少,做的多” 包含以下功能: HTML元素选取 HTML元素操作 CSS操作 HTML...

    jquery 基础知识汇总

    **jQuery基础知识汇总** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。由于其简洁的API和强大的功能,jQuery成为了前端开发的首选工具之一。 ### 1. jQuery...

    jquery基础知识要点

    在学习 jQuery 的基础知识时,理解 jQuery 对象与 DOM 对象的区别至关重要。 1. **jQuery 对象与 DOM 对象的转换** - jQuery 对象是由 `$(...)` 包裹的对象,可以调用 jQuery 提供的所有方法。DOM 对象则是浏览器...

    jQuery从基础到高级的知识点梳理

    总结了从jquery基础到重点的知识点,可方便大家从了解到熟练jquery,可参考其中来巩固。

    jQuery 选择器 操作DOM 事件处理 动画基础

    jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础

    jquery的jar包 入门基础

    本文将深入探讨jQuery的基础知识,包括其核心概念、使用方法和常见应用。 首先,我们需要理解jQuery的核心理念是“write less, do more”。通过简洁的语法,jQuery封装了许多复杂的JavaScript原生函数,使代码更...

    jQuery基础教程.pdf

    jQuery基础教程.pdf jQuery基础教程.pdf

    jQuery基础知识的电子书

    **jQuery基础教程** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。自2006年发布以来,jQuery已经成为了前端开发的标准工具之一,使得开发者能够更高效地编写...

    jQuery基础教程 pdf清晰版

    ### jQuery基础教程知识点总结 #### 一、作者与背景介绍 - **Jonathan Chaffer**:资深Web专家,Structure互动公司的CTO。他是著名jQuery资源网站LearningjQuery.com的创始人之一,并且是开源CMS项目Drupal的核心...

    jQuery基础入门pp

    jQuery基础入门pp

Global site tag (gtag.js) - Google Analytics