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选择器如何获取父级元素、同级元素、子元素
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu
-
JQuery中$之选择器用法介绍
1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素.下面举个例子来说明一下: HTML代码 <input name="newsletter" /> <input name="milkman" /&g
-
jQuery Selector选择器小结
//jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#
-
jQuery选择器全集详解
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行 了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(fu
-
jQuery插件实现适用于移动端的地址选择器
最近在工作中需要用到地址选择器,像下面这样的,本想在网上找一个,可是没找到,于是自己写了个jquery插件. 直接上代码吧: var provinces = { "A": { "安徽":["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市&qu
-
jquery选择器-根据多个属性选择示例代码
根据多个属性选择E[attr=val][attr=val] $("div[title='ttt'][class='aaaa']").click()................ 所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素
-
JQuery 选择器、过滤器介绍
今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts
-
jquery 属性选择器（匹配具有指定属性的元素）
jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("
-
jquery选择器大全 全面详解jquery选择器
选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1．简化代码的编写2．隐式迭代3．无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j
-
JQuery的加载和选择器用法简单示例
本文实例讲述了JQuery的加载和选择器用法.分享给大家供大家参考,具体如下: JQuery加载 一般开发中不用原生的JavaScript而是用JQuery,开发效率比较高. 下面程序是原生和JQuery库的比较程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <
-
jquery实现加载更多"转圈圈"效果(示例代码)
功能:发送网络请求时等待加载的圈圈动态显示,网络请求成功后关闭提示圈圈 代码: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css画动态等待转圈效果</title> <link rel="stylesheet" href="public/ind
-
jquery动态加载select下拉框示例代码
如题,直接上代码,实战学习. 复制代码 代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g
-
jQuery异步加载数据并添加事件示例
几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了. 当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的. 1.之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法,来实现该功能 $('#div').live('click',function(){ //do stuff }); 但是live方法也有不支持的事件,例如:to
-
jQuery NProgress.js加载进度插件的简单使用方法
NProgress.js 说明: NProgress是基于jquery的,且版本要 >1.8 下载地址: https://github.com/rstacruz/nprogress API: NProgress.start() - 启动进度条 NProgress.set(0.4) - 将进度设置到具体的百分比位置 NProgress.inc() - 少量增加进度 NProgress.done() - 将进度条标为完成状态 使用步骤: 1. 引入 <link rel="styleshe
-
javaScript和jQuery自动加载简单代码实现方法
在此之前我们给大家整理过用javaScript和jQuery自动加载的几种方法,大家可以参考一下:javaScript 页面自动加载事件详解 一.JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下: <body onload="alert(1)"></body> <!-- 当有一个onload --> <body onload="alert(2);alert(3);a
-
JQuery异步加载PartialView的方法
本文实例讲述了JQuery异步加载PartialView的方法.分享给大家供大家参考,具体如下: 需求:页面上有dropdown之类的控件,当选择里面不同值的时候,下面关联的内容跟着改变. 思路:把与 dropdown关联的会改变的内容放到PartialView(ascx)里,用JQuery绑定dropdown的change事件,当选择值改变时,用JQuery ajax请求与PartialView相关的Action,得到数据后讲取到的内容覆盖原来的内容. 实现: Model 类: public
-
jQuery滚动加载图片实现原理
本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 二.为什要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的
-
jquery动态加载js三种方法实例
复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
jQuery页面加载初始化的3种方法(推荐)
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种: $(function(){ alert("第二种方法."); }); 第三种: jQuery(function($) { alert("第三种方法."); }); ps; 不用jQuer