jQuery学习心得----第一集:选择器(#)

原创 2016年08月30日 09:18:39

今年刚大学毕业,就在公司开始弄前端,说实话,刚开始也确实有很多不会的地方,慢慢边学边总结吧,也希望把自己的学习心得分享给大家。言归正传,jQuery是什么?我听这个名字也才近两个月,按照我的理解,就是一些封装好的JavaScript库,我们拿来使用而已。

在写HTML页面的时候,我们要对某一样元素(就是css中的p、div等标签)添加效果的时候,第一步是干什么呢?毋庸置疑,是要选择到这个元素,所以顾名思义,jQuery选择器就是帮助我们选到想要的元素。选择器分为很多种,先讲基本选择器。不多说,上代码举例。

问题:点击按钮,改变指定div背景色。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jQuery,因为举例,所以直接网上引一个,一般可以去官网下一个jQuery包-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    </head>
<body>
<!--CSS样式-->
<style>
    .a1{
        background-color: #FF9933;
    }
    .a2{
        background-color: #9999CC;
    }
</style>
<!--页面代码-->
<div class="a1" id="one">
    <div>id为one,class为a1的div。</div>
</div><br>
<div class="a2" id="two">
    <div>id为two,class为a2的div。</div>
</div><br>
<input onclick="ChangeColor();" value="改变颜色" type="button"/>//给button添加onClick事件,调用指定js函数。

JS代码:

<script type="text/javascript">
    function ChangeColor(){


        //1.改变id为one元素的背景。
       $("#one").css("background","#000000");


        //2.改变class为a2的元素的背景
       $(".a2").css("background","#000000");


        //3.改变元素名为div的背景。
       $("div").css("background","#000000");


        //4.改变id为one,class为a2的背景。
       $("#one,.a2").css("background","#000000");
    };
</script>

$(“”).  这个是jQuery选择器的一种表示格式,上面的代码一共举了四种基本选择器的实例。

用JS传统的getElementById()、getElementByName()等方法也可以达到选择器的效果,但是这些个方法吧,不太好使,敲起来不方便,编一些复杂代码的时候,往往需要重复使用,没有jQuery选择器那样定位精准呀。


版权声明:本文为博主原创文章,未经博主允许不得转载。

JQuery中的特殊选择器--this

相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?下面我们一起来看一下! this是JavaScript中的关键字,指的是当前的上下文对象,简单...
  • LHJBK
  • LHJBK
  • 2016年05月30日 21:16
  • 1172

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1163

常用jQuery选择器详解

元素选择是一切操作的前提,jQuery中$()函数最强大最常用的功能之一就是使用选择器选择DOM元素。这里就汇总一些十分常用的jQuery选择器。1、jQuery选择器基本结构$('选择器') $('...
  • a153375250
  • a153375250
  • 2016年05月26日 14:46
  • 1504

JQuery_九大选择器

JQuery中九大选择器。
  • pseudonym_
  • pseudonym_
  • 2017年07月25日 18:19
  • 567

详解jQuery选择器正则表达式

1、空白 whitespace = "[\\x20\\t\\r\\n\\f]", 在字符串中,斜杠是用于转义的,若想输出斜杠,必须采用双斜杠来表示。上述字符串若直接用正则表达式对象来表示,如下: ...
  • mole
  • mole
  • 2015年02月02日 18:26
  • 3316

jquery 联合选择器,相对选择和层级选择器__多类交集选择器,多属性选择器

1、多条件选择器 用途:使用多个条件同时选择多个标签 用法:$(“条件1,条件2,条件3,……,条件n “); 特征:多个条件在“”内用逗号隔开; 用例:$(“div#id,span.tip,...
  • h330531987
  • h330531987
  • 2017年10月26日 10:26
  • 183

jquery选择器扩展之样式选择器

jquery中提供了丰富多样的选择器,利用这些选择器我们可以完成大多数任务,但是喜欢思考的我们总得找点事,提问时间: 1.如何选择所有字体颜色为红色的元素 2.如何选择出背景颜色为为白色的元素 3.如...
  • duwen90
  • duwen90
  • 2016年01月23日 18:05
  • 1506

jquery选择器的实现原理

html部分 Document 1 2 var result = $("div"); console.log(result); alert($('div').size(...
  • qq_30100043
  • qq_30100043
  • 2016年11月03日 00:57
  • 959

jQuery 源码分析 选择器

jquery
  • wx11055
  • wx11055
  • 2016年01月11日 13:51
  • 306

jQuery-9种选择器

jQuery 9种选择器   1、基本选择器-5个    1 html> 2 head> 3 meta http-equiv="content-type" conte...
  • zfs592645357
  • zfs592645357
  • 2014年10月30日 16:20
  • 1277
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery学习心得----第一集:选择器(#)
举报原因:
原因补充:

(最多只允许输入30个字)