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实现购物车基本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了jQuery实现的超简单点赞效果,结合实例形式分析了jQuery实现点赞功能的具体步骤与相关技巧,需要的朋友可以参考下2015-12-12
jQuery UI 实例讲解 - 日期选择器(Datepicker)
下面小编就为大家带来一篇jQuery UI 实例讲解 - 日期选择器(Datepicker)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了jQuery实现的登录浮动框效果代码,点击登陆链接可弹出悬浮登录框,涉及jQuery中show与hide方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
:input表示选择表单中的input,select,textarea,button元素，input仅仅选择input元素。2011-07-07
这边文章主要给大家介绍了jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray，十分的详细，有需要的小伙伴可以参考下。2015-07-07
只要能够不停地把第一个item移动到末尾，其余的自会往上填补空缺，填补的过程用动画放慢些，就能有不断滚动的视觉效果了，这种效果基于jquery怎么实现呢？下面小编给大家带来了jQuery列表循环滚动效果的实现思路代码，一起看看吧2021-08-08
jquery弹层类代码分享，大家参考使用吧2013-12-12
对话框（Dialog）是一个特殊的窗口（window），可以包含在顶部的工具栏和在底部的按钮。接下来通过本文给大家介绍easyui创建对话框的两种方式，非常不错，感兴趣的朋友一起看下吧2016-08-08
基于jquery的inputlimiter 实现字数限制功能
因客户要求区分全角跟半角，所以在jquery.inputlimiter.js插件上还做了些小改动。2010-05-05
最新评论