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


Posted in jQuery onMay 13, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun 测试上述代码运行效果。

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

jQuery 相关文章推荐
jquery实现图片上传前本地预览
Apr 28 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
JQuery事件委托原理与用法实例分析
May 13 #jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
使vue实现jQuery调用的两种方法
May 12 #jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 #jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
详解jQuery如何实现模糊搜索
May 10 #jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
You might like
php $_SERVER当前完整url的写法
2009/11/12 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
php接口隔离原则实例分析
2019/11/11 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
json数据的列循环示例
2013/09/06 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
简述Angular 5 快速入门
2017/11/04 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
python绘制热力图heatmap
2020/03/23 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python之array赋值技巧分享
2019/11/28 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
会计专业自我鉴定
2014/02/10 职场文书
学校运动会霸气口号
2014/06/07 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书