开发者社区> 游客at5iuxxf3n33o> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery入门(上)

简介: 上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些JavaScript的操作,所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。
+关注继续查看

一、初识jQuery:


1、使用方法:


去官网http://jquery.com/download/下载jQuery的包,然后放到项目中存放js代码的目录下,最后在需要用jQuery的HTML中用<script type="text/javascript" src="js目录/jquery.js"/>引入即可。


2、jQuery对象与DOM对象:


jQuery对象与DOM对象是不一样的,看下面例子:


需求:我们要获取页面上这个id为test的p元素,然后给这个文本节点增加一段文字:“hello world”,并且让文字颜色变成红色。

<p id="test"></p>
<!-- 用原生JavaScript的做法-->
var p = document.getElementById('test');
p.innerHTML = 'hello world';
p.style.color = 'red';
<!-- 通过jQuery操作-->
var $p = $('#test');
$p.html('hello world').css('color','red');


用JavaScript操作是过取到DOM对象,再进行操作,而jQuery获取到的$p是jQuery对象。


jQuery对象与DOM对象的转换:

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
var div = $div.get(0) //通过get方法,转化成DOM对象
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素


二、jQuery选择器:


1、id选择器 $( "#id" ):


所谓id选择器,就是相当于JavaScript的getElementById()方法。语法:$( "#id" ),也就是说#号后面跟上要操作的标签的id的值即可。


2、类选择器 $( ".class" ):


就是通过标签的class属性来选择标签的选择器。语法:$( ".class" ),也就是 . 后面跟上标签的class的值即可。


3、元素选择器 $( "element" ):


也就是直接通过标签名选择标签,比如$("p").css("border", "3px solid blue");就是通过jQuery的元素选择器选择到所有的p标签,然后改变其样式。


4、全选择器 $( "*" ):


顾名思义,全选择器就是选择所有的标签。


5、层级选择器:


一个页面就是由各种标签构成的,各个标签之间存在着不同的关系,父子关系、兄弟关系等,层级选择器就可以处理这种关系。用法如下表:


选择器描述
$("parent > child")子选择器,选择所有指定“parent”
元素中指定的“child”直接子元素
$("ancestor descendant")后代选择器,选择给定的祖先元素“ancestor”
的所有descendant后代,包括儿子、孙子、曾孙等
$("prev + next")相邻兄弟选择器,选择紧
接在“prev”元素后的“next”元素
$("prev ~ siblings")一般兄弟选择器,与相邻兄弟选择器的区别是
,相邻的指挥选择相邻的,而这个是选所有。


6、基本筛选选择器:


筛选选择器的用法与CSS中的伪元素相似,选择器用冒号“:”开头,通过一个列表,看看基本筛选器的描述:


image.png


7、内容筛选选择器:


基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器。其描述如下:


image.png


8、可见性筛选选择器:


元素有显示状态与隐藏状态,jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden


选择器描述
$(":visible")选择所有显示的元素
$(":hidden")选择所有隐藏元素


9、属性筛选选择器:


属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素,这就是属性选择器展示它们的威力的地方。


image.png


10、子元素筛选选择器:


这个不是很常用,用法如下:


image.png


11、表单元素选择器:


顾名思义,表单元素选择器就是方便操作表单的选择器。


image.png


12、表单对象属性筛选选择器:


除了表单元素选择器外,表单对象属性筛选选择器也是专门针对表单元素的选择器,可以附加在其他选择器的后面,主要功能是对所选择的表单元素进行筛选。


image.png


13、特殊选择器this:


this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。

$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。直接看案例代码:

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})


三、jQuery的属性与样式:


1、.attr()与.removeAttr():


操作特性的DOM方法主要有3个,getAttribute方法、setAttribute方法和removeAttribute方法,就算如此在实际操作中还是会存在很多问题,这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题。直接看案例来体会其用法:

<form>
        <input type="text" value="设置value" />
        <input type="text" value="获取value"/>
        <input type="text" value="回调拼接value" />
        <input type="text" value="删除value" />
    </form>
<script type="text/javascript">
        $("input:first").attr('value','测试')// 把“设置value”改成“测试”
        $("input:eq(1)").attr('value')// 获取第二个input的value属性的值
        //把新的值与现有的值联系在一起:
        $("input:eq(2)").attr('value',function(i, val){// 拼接第三个input的value属性的值
            return '通过function设置' + val
        })
        $("input:eq(3)").removeAttr('value')// 删除第四个input的value属性的值
    </script>


运行结果如下图:


image.png


2、.html()、.text()和.val():


读取、修改元素的html结构或者元素的文本内容又或者操作表单字段value值是常见的DOM操作,jQuery针对这样的处理提供了3个便捷的方法.html()、.text()和.val()。

.html()的用法:操作元素的html结构


语法:$("element").html()$("element").html(htmlString)

$("element").html(function(index,html){...})


案例:

<div class="demo">
   <p> <a href="#">baidu</a></p>
</div>
<script type="text/javascript">
   //第一种用法(如果有多个p标签,那么只能获取第一个p标签的内容)
   alert($(".demo p").html());//会弹出 “ <a href="#">baidu</a> ”
   //第二种用法(如果有多个p标签,那么每一个p标签都会加上 .html方法里面的内容)
  ($(".demo p").html('<a href="#">taobao</a>'));
  // 结果会把html方法里面的a标签添加到p标签里面,p标签里面就有两个a标签了
  //第三种用法
  $(".demo p").html(function(index,oldHtml){
       return "我是第" + (index+1) + "个p标签:" + oldHtml;
  })
  //结果就是(假设已经执行了第二种用法中的演示代码):
  /*
   <p>我是第1个p标签<a href="#">baidu</a></p>
   <p>我是第2个p标签<a href="#">taobao</a></p>
  */
</script>


.text()的用法:操作元素的纯文本内容


语法:$("element").text()$("element").text(textString)

$("element").text(function(index,text){...})


案例:

<div class="demo">
   <p> <a href="#">baidu</a></p>
</div>
<script type="text/javascript">
   //第一种用法(如果有多个p标签,那么其他p标签里的文本内容也能获取到)
   alert($(".demo p").text());//会弹出 “baidu ”,所以该方法只能获取纯文本内容
   //第二种用法(如果有多个p标签,那么每一个p标签都会被替换成纯文本内容)
  ($(".demo p").text('<a href="#">taobao</a>'));
  // 结果会把class为demo的div下面的所有p标签替换成text方法里面的纯文本内容
  //第三种用法
  $(".demo p").text(function(index,oldText){
       return "我是第" + (index+1) + "个p标签里面的文本:" + oldText;
  })
  //结果就是:
  /*
    我是第1个p标签里面的文本:baidu
  */
</script>


.val()的用法:操作表单字段value值


语法:$("element").val()$("element").val(value)$("element").val(function(index,value){...})


案例:

<div id="test">
  <input type="radio" name="color" id ="rd1" value="red" />红色
  <input type="radio" name="color" id ="rd2" value="blue" />蓝色
</div>
<script type="text/javascript">
  // 第一种用法(只会获取到第一个input的值,跟有没有选中没关系)
  alert($("#test input:radio").val());// 弹出“红色”
  //第二种用法(获取用户选中的值,而不是返回第一个)
  alert($("input:radio[name=color]:checked").val());// 弹出用户选中的颜色
  // 第三种用法
  $("input").val("blank");// 会把所有input的value值替换成blank
  //第四种用法(会依次获取input的value值)
  $("input:radio[name=color]").val(function(index,oldVal){
    return "color-"+(index+1)+":"+oldVal;
  })
</script>


3、.addClass():


过动态改变类名(class),可以让其修改元素呈现出不同的效果。直接看案例:

<style>
   .firstClass{
        background: #bbffaa;
    }
   .secondClass{
        background: red;
    }
</style>
<div class="left">
  <div class="aaron">
      <p>测试1</p>
  </div>
  <div class="aaron">
      <p>测试2</p>
  </div>
</div>
<script type="text/javascript">
  $('.left div').addClass('firstClass')
</script>


本来“测试1”和“测试2”都是没有颜色的,下面的js代码运行后,就会给这两个div添加“firstClass”,所以“测试1”和“测试2”背景就会变成红色。还有删除class的removeClass()方法和切换class的toggleClass()方法,用法类似。


4、.css():


在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了。看案例:

<div class="first">获取颜色</div>
    <p></p>
<script type="text/javascript">
        $('p:eq(0)').text( $('.first').css("background-color","red") )
</script>


本来“获取颜色”这四个字是没有颜色的,运行了js代码后,就会有红色的背景颜色。添加样式还有.addClass()方法,它的优先级低于.css()方法。


5、元素的数据存储:


jQuery提供的存储接口:

jQuery.data( element, key, value )   //静态接口,存数据
jQuery.data( element, key )  //静态接口,取数据   
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据


看到这些语法也是摸不着头脑,直接看案例体会其用法:

<h2>jQuery.data()静态方法</h2>
    <div class="left">
        <div class="aaron">
            <p>点击看结果</p>
            <p>jQuery.data</p>
        </div>
        <div><span></span></div>
    </div>
    <h2>.data()实例方法</h2>
    <div class="right">
        <div class="aaron">
            <p>点击看结果</p>
            <p>.data</p>
        </div>
        <div><span></span></div>
    </div>
    <script type="text/javascript">
    $('.left').click(function() {
        var ele = $(this);
        //通过$.data方式设置数据
        $.data(ele, "a", "data test")
        $.data(ele, "b", {
            name : "简书"
        })
        //通过$.data方式取出数据
        var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
        ele.find('span').append(reset)
    })
    </script>
    <script type="text/javascript">
    $('.right').click(function() {
        var ele = $(this);
        //通过.data方式设置数据
        ele.data("a", "data test")
        ele.data("b", {
            name: "简书"
        })
        //通过.data方式取出数据
        var reset = ele.data("a") + "</br>" + ele.data("b").name
        ele.find('span').append(reset)
    })
    </script>


没点击“点击看结果”的时候是这样的:


image.png


点击了“点击看结果”后是这样的:


image.png


也就是说,data可以用来暂时存储数据,然后还可以取出来。



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery入门基础
jQuery入门基础 jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
32 0
jQuery wizard,一款创建步骤向导的插件
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/74926175 这篇文章完全没有技术难度,但我为什么要写呢?因为我想把这么好的一款插件推荐给需要的小伙伴。
1345 0
30个非常流行的提示信息插件(jQuery Tooltip Plugin)
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用。如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件jQuery Tooltip Plugin,希望对大家有帮助。
757 0
2009 年度最佳 jQuery 插件
jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。
1215 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
973 0
Jquery 学习笔记(三)240多个jQuery插件
Jquery 学习笔记(三) -240多个jQuery插件 2009年11月30日二 作者:   邦畿千里   概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。
1058 0
Jquery插件
看到了别人的总结的插件,本想一个一个的试,但数量太大,所以……,插件地址直接拷过来,用的时候再说吧文件上传(File upload) Ajax File Upload.jQUploader.Multiple File Upload plugin.
975 0
[Jquery Plugin]Jquery Tabs 插件简介-更友好地组织你的页面
关于Jquery Tab插件,比较流行的是jQuery UI Tabs,最近此插件也已经有了更新,地址为http://stilbuero.de/jquery/tabs_3/ ,目前国内很多网站也在使用此插件,希望大家有时间了试用一下。
1079 0
[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写
jQuery Media Plugin简介:        Jquery Media Plugin是一款页面内容嵌套多媒体的插件。支持的大部分的多媒体播放器和多媒体格式,比如:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF等等。
654 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
零基础CSS入门教程
立即下载
JavaScript异步编程
立即下载