栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

JQuery加载

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

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




  
  document
  
  


这是一个div元素



虽然原生的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属性
    *




  
  Title
  
  
  
  
  
  
  
  
  
  
  
  
  


div1
div2
div3
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

对选择集进行过滤

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




  
  Title
  
  


  1
  

2

3 4 5 6 7 8

判断是否选择到了元素

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程序设计有所帮助。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/75870.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号