JQuery的加载和选择器用法简单示例

更新时间：2019年05月13日 11:52:42 作者：SpecYue

这篇文章主要介绍了JQuery的加载和选择器用法,结合简单实例形式分析了jQuery的功能、加载、选择器的相关使用技巧,需要的朋友可以参考下

本文实例讲述了JQuery的加载和选择器用法。分享给大家供大家参考，具体如下：

JQuery加载

一般开发中不用原生的JavaScript而是用JQuery，开发效率比较高。

下面程序是原生和JQuery库的比较程序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    window.onload = function () {
      var oDiv = document.getElementById('div1');
      alert('原声弹出的' + oDiv);
    };
    $(document).ready(function () {//这是jquery的写法，作用和原生js的window.onload作用是一样的
      var $div = $('#div1');
      alert('jquery弹出的' + $div);
    });
    //下面是上面jQuery完整写法的简写
    $(function () {
      var $div = $('#div1');
      alert('jquery简写弹出的' + $div);
    });
  </script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

虽然原生的js函数是写在前面的，但是实际上JQuery弹出之后才会弹出js的alert，因为window.onload是等标签加载完成之后，再渲染完之后才允许。ready是等标签加载完之后就运行，所以要快。

JQuery选择器

    * jquery可以快速的选择元素，选择规则和css样式相同，使用length属性判断是是否选择成功
        * $(#myid) 选择id为myid的网页元素
        * $('.myclass') 选择class为myclass的元素
        * $("li")   选择所有li元素
        * $("#ul1 li span") 选择id为ul1元素下的所有li下的span元素
        * $("input[name=first]")    选择name属性等于first的input属性
    *

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--不能直接撬开这里写-->
  <script type="text/javascript">
    /*
    * jquery可以快速的选择元素，选择规则和css样式相同，使用length属性判断是是否选择成功
      * $(#myid) 选择id为myid的网页元素
      * $('.myclass') 选择class为myclass的元素
      * $("li")  选择所有li元素
      * $("#ul1 li span") 选择id为ul1元素下的所有li下的span元素
      * $("input[name=first]")  选择name属性等于first的input属性
    *
    * 对选择集进行过滤
      * $("div").has("p") 选择包含p元素的div元素
      * $('div').not(".myclass") 选择class不等于myclass的div元素
      * $('div').filter('.myclass')  选择class等于myclass的元素
      * $('div').eq(5)  选择第六个div元素
    * */
    $(function () {
      var $div = $(#div1);
      var $div2 = $('.box');
      var $li = $('.list li');
      $div.css({'color': 'red'});
      $div2.css({'color': 'green'});
      $li.css({'color':'prink'});
    });
  </script>
  <!--<style type="text/css">-->
  <!--#div1{-->
  <!--color: red;-->
  <!--}-->
  <!--.box{-->
  <!--color: green;-->
  <!--}-->
  <!--.list li{-->
  <!--background-color: mediumspringgreen;-->
  <!--}-->
  <!--</style>-->
</head>
<body>
<div id="div1">div1</div>
<div class="box">div2</div>
<div class="box">div3</div>
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</body>
</html>

对选择集进行过滤

* $("div").has("p") 选择包含p元素的div元素
* $('div').not(".myclass") 选择class不等于myclass的div元素
* $('div').filter('.myclass') 选择class等于myclass的元素
* $('div').eq(5) 选择第六个div元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var $div=$('div')
      $div.css({backgroundColor:'red'});
      $div.has('p').css({backgroundColor:"green"});
      $div.eq(4).css({textIndent:'20px'});
    })
  </script>
</head>
<body>
  <div>1</div>
  <div><p>2</p></div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</body>
</html>

判断是否选择到了元素

JQuery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素，length等于0就是没找到元素，大于0就是找到了元素

var $div1=$("#div1");
alert($div1.length);

手册上传至github。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jquery 插件学习（三）
用惯jquery的用户可能习惯于连写行为，也就是说在调用一个方法之后，紧跟着调用另一个方法，如此连写不断，形成一个珍珠链，而且编写灵活，方便
2012-08-08
当jquery ajax遇上401请求的解决方法
下面小编就为大家带来一篇当jquery ajax遇上401请求的解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
由简入繁实现Jquery树状结构的方法(推荐)
下面小编就为大家带来一篇由简入繁实现Jquery树状结构的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
jquery实现漂浮在网页右侧的qq在线客服插件示例
很实用的一款QQ在线客服代码，点击QQ图标，可直接与客服对话，详细如下，感兴趣的朋友可以参考下哈，希望对你有所帮助
2013-05-05
jQuery实现的感应鼠标悬停图片色彩渐显效果
这篇文章主要介绍了jQuery实现的感应鼠标悬停图片色彩渐显效果,涉及jQuery中hover、find、css等方法的使用技巧,需要的朋友可以参考下
2015-03-03
cnblogs中在闪存中屏蔽某人的实现代码
cnblogs园子还没提供这项功能，我们又确实有这个需求，只好自己写一个,需要的朋友可以参考下。
2010-11-11
JQuery实现可直接编辑的表格
这篇文章主要介绍了JQuery实现可直接编辑的表格,实例分析了jQuery动态操作编辑表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
浅析jQuery移动开发中内联按钮和分组按钮的编写
这篇文章主要介绍了jQuery移动开发中内联按钮和分组按钮的编写方法,基于jQuery mobile这个jQuery针对移动开发版的库,需要的朋友可以参考下
2015-12-12
Jquery ui css framework
Jquery ui css framework是jquery ui中的一个样式框架，可以利用jquery Theme roller 来生成自己想要的css样式效果。我们可以利用jquery ui的一些框架来开发出基于jquery ui css framework效果的插件来。
2010-06-06
jQuery子选择器与可见性选择器实例分析
这篇文章主要介绍了jQuery子选择器与可见性选择器,结合实例形式分析了jQuery子选择器与可见性选择器的功能、常见用法及相关操作注意事项,需要的朋友可以参考下
2019-06-06