JQUERY基础(一)

本文介绍jQuery的基本概念,包括其发展历程、优点以及如何在项目中引入和使用jQuery。同时,对比了jQuery对象与JavaScript对象的不同之处,并详细讲解了jQuery的选择器和常用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

六)jQuery是什么

    John Resig20061月发布的一款跨主流浏览器的JavaScript库,简化JavaScriptHTML操作

    参见<<什么是jQuery.JPG>>

 

 

七)为什么要使用jQuery

   1)写少代码,做多事情【write less do more

   2)免费,开源且轻量级的js库,容量很小

        注意:项目中,提倡引用min版的js

   3)兼容市面上主流浏览器,例如 IEFirefoxChrome

        注意:jQuery不是将所有JS全部封装,只是有选择的封装

   4)能够处理HTML/JSP/XMLCSSDOM、事件、实现动画效果,也能提供异步AJAX功能

   5)文档手册很全,很详细

   6)成熟的插件可供选择

   7)提倡对主要的html标签提供一个id属性,但不是必须的

   8)出错后,有一定的提示信息

   9)不用再在html里面通过<script>标签插入一大堆js来调用命令了

      

 

八)jQuery开发步骤

   1)引用第三方js库文件,<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

   2)查阅并使用api手册,$("#divID").html()/val()/text()/css("color","red")/....

//var divElement = document.getElementById("divID");

var $div = $("#divID");

//var html = divElement.innerHTML;

var html = $div.html();

alert(html);

 

 

九)js对象和jQuery对象相互转换

   1)什么是js对象及代码规则

        就是使用js-API,即Node接口中的API或是传统JS语法定义的对象,叫做js对象

        js代码规则----divElement

    var divElement = document.getElementById("divID");

        var nameArray = new Array(3);

 

   2)什么是jQuery对象及代码规则

        就是使用jQuery-API,返回的对象就叫做jQuery对象

        jQuery代码规则----$div

        var $div = $("#divID")

        声明:上述代码规则,只是老师个人规则,不代表所有企业都这样做

 

   3js对象转成jQuery对象【重点】

        语法:$(js对象)---->jQuery对象

        例如:$(divElement)---->$div

        例如:$(this)---->$this

        注意:jQuery对象将js对象做了封装,js对象二边无引号

var inputElement = document.getElementById("inputID");//js对象

var $input = $(inputElement);//jquery对象

var txt = $input.val();

alert(txt);

 

   4jQuery对象转成js对象

        语法1jQuery对象[下标,从0开始]

        语法2jQuery对象.get(下标,从0开始)

        例如:$div[0]---->divElement

        注意:不同的对象只能调用对应的api方法,即jQuery对象不能调用js对象的api,反之亦然

    $div.innerHTML(错)

    divElement.html()

var $div = $("#divID");//jquery对象

var divElement = $div[0];//js对象(方式一)

//var divElement = $div.get(0);//js对象(方式二)

var txt = divElement.innerHTML;  

alert(txt);

 

 

十)js对象和jQuery对象的区别

   1js对象的三种基本定位方式

       A)通过ID属性:document.getElementById()

       B)通过NAME属性:document.getElementsByName()

       C)通过标签名:document.getElementsByTagName()

   2jQuery对象的三种基本定位方式

       A)通过ID属性:$("#id属性值")

       B)通过标签名:$("标签名")

       C)通过CLASS属性:$(".样式名")

   3js对象出错的显示

        没有合理的提示信息

    例如:alert(document.getElementById("usernameIDD").value)

   4jQuery对象出错的显示

        有合理的提示信息,例如:undefined

    例如:alert($("#usernameIDD").val())

 

 

十一)jQuery九类选择器(上)【参见jQueryAPI.chm手册】

      目的:通过选择器,能定位web页面(HTML/JSP/XML)中的任何标签

(1) 基本选择器【参见selector_1.html

   //1)查找ID"div1ID"的元素个数

       alert( $("#div1ID").size() );

       

  //2)查找DIV元素的个数

      alert( $("div").size() );

      

  //3)查找所有样式是"myClass"的元素的个数

      alert( $(".myClass").size() );

  

  //4)查找所有DIV,SPAN,P元素的个数

      alert( $("div,span,p").size() );

      

  //5)查找所有IDdiv1ID,CLASSmyClass,P元素的个数

      alert( $('#div1ID,.myClass,p').size() );

 

(2) 层次选择器【参见selector_2.html

//1)找到表单form里所有的input元素的个数

    alert( $("form input").size() );

  //2)找到表单form里所有的子级input元素个数

  alert( $("form > input").size() );

  

  //3)找到表单form同级第一个input元素的value属性值

      alert( $("form + input").val() );

  

  //4)找到所有与表单form同级的input元素个数

  alert( $("form ~ input").size() );

 

(3) 增强基本选择器【参见selector_3.html

//1)查找UL中第一个元素的内容

alert( $("ul li:first").text() );

 

  //2)查找UL中最后个元素的内容

alert( $("ul li:last").text() );

 

  //4)查找表格的索引号为135...奇数行个数,索引号从0开始

alert( $("table tr:odd").size() );

 

  //5)查找表格的索引号为246...偶数行个数,索引号从0开始

alert( $("table tr:even").size() );

 

  //6)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式

      alert( $("table tr td:eq(1)").text() );

 

  //7)查找表格中第二第三行的个数,即索引值是12,也就是比0

alert( $("table tr:gt(0)").size() );

 

  //8)查找表格中第一第二行的个数,即索引值是01,也就是比2

alert( $("table tr:lt(2)").size() );

 

  //9)给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加蓝色

$(":header").css("background-color","red").css("color","blue");

  //3)查找所有未选中的inputcheckbox的元素个数

alert( $(":checkbox:NOT(:checked)").size() );

 

(4) 内容选择器【参见selector_4.html

//1)查找所有包含文本"John"div元素的个数

    alert( $("div:contains('John')").size() );

    

  //2)查找所有p元素为空的元素个数

      alert( $("p:empty").size() );

  

  //3)给所有包含p元素的div元素添加一个myClass样式

  $("div:has(p)").addClass("myClass");

  

  //4)查找所有含有子元素或者文本的p元素个数,p为父元素

      alert( $("p:parent").size() );

 

      。。。

 

 

十二)jQuery中常用方法(上)   

      目的:通过方法,能操作web页面(HTML/JSP)中的任何标签

     1val():获取标签的value属性值,前提是该标签有value属性

     2html():获取标签之间的内容,不能用运于xml文件

     3text():获取标签之间的内容,可以用运于html/jspxml文件,(提倡)

     4css():加key-value形成的css样式

     5addClass():加已经定义好的一个css样式

     6size():获取jQuery对象/数组中元素的个数,提倡

     7length:获取jQuery对象/数组中元素的个数

      注意:在写jQuery代码时,不光可以使用jQueryAPI,还能使用传统JSAPI

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值