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+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 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 程序授权验证开发思路
2009/07/09 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
js读取cookie方法总结
2014/10/31 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
跟老齐学Python之list和str比较
2014/09/20 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
详解Python的循环结构知识点
2019/05/20 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
详解rem 适配布局
2018/10/31 HTML / CSS
在购买印度民族服饰:Soch
2020/09/15 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
工作交流会欢迎词
2014/01/12 职场文书
高中生物教学反思
2014/02/05 职场文书
关爱残疾人标语
2014/06/25 职场文书
委托证明范本
2014/11/25 职场文书
2015年度女工工作总结
2015/10/22 职场文书
Django程序的优化技巧
2021/04/29 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python