Jquery语法基础
Jquery语法基础
一、Jquery一般语法格式为：$(selector).action()
- l 美元符号定义 jQuery （又称工厂函数）
- l 选择器（selector）“查询”和“查找” HTML 元素
- l action() 执行对元素的操作
示例：
$(this).hide() // 隐藏当前元素
$("p").hide() // 隐藏所有段落
$("p.test").hide() // 隐藏所有 class="test" 的段落
$("#test").hide() // 隐藏第 id="test" 的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery的基础语法</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
//$(this).hide();
//$("p").hide();
//$("p.test").hide();
$("#test").hide();
});
});
</script>
</head>
<body>
<button>btn</button>
<p id="test">这是P1段落</p>
<p class="test">这是P2段落</p>
<p class="test">这是P3段落</p>
<p class="test1">这是P4段落</p>
</body>
</html>
二、jQuery 代码链式风格
a) 对于同一对象不超过3个操作，可直接写一行，添加必要注释。
b) 对同一对象的操作较多，建议每行写一个操作
<!DOCTYPE html>
<html>
<head>
<title>链式风格.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".div1").width(100);
$(".div1").height(100);
$(".div1").css({border:"1px solid black",background:"green"});
// $(".div1").width(100).height(100).css({border:"1px solid black",background:"green"});
});
});
</script>
</head>
<body>
<button>btn</button>
<div class="div1"></div>
</body>
</html>
三、文档就绪函数：$(document).ready()
类似 window.onload，定义文档加载完后执行的函数。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。
案例
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World!");
});
</script>
</head
<body>
This is my HTML page.<br>
</body>
</html>
window.onload 与 $(document).ready() 的对比：
|
window.onload |
$(document).ready() |
|
|
执行时机 |
必须等网页中所有内容加载完后（包括图片）才能执行 |
网页中所有DOM结构绘制完后就执行 |
|
编写个数 |
不能编写多个 此时第二个覆盖第一个 |
能同时编写多个 两个函数都执行 |
|
简化写法 |
无 |
$( ) |
<!DOCTYPE html>
<html>
<head>
<title>与document对比.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//window.onload与$(document).ready()的区别：
//区别一：执行时机：window.onload：等页面中的所有元素加载完成之后执行
//$(document).ready():等页面中的dom元素加载完成之后就会执行
//区别二：编写的个数:window.onload:不能编写多个，第二个要覆盖第一个的值
//$(document).ready():可以编写多个，依次执行
/*
window.onload=function(){
document.getElementById("btn").onclick=function(){
alert("Hello
World!");
}
}
window.onload=function(){
document.getElementById("btn").onclick=function(){
alert("bbbbbb");
}
} */
/*
$(document).ready(function(){
$("#btn").click(function(){
alert("aaaaaa");
});
});
$(document).ready(function(){
$("#btn").click(function(){
alert("bbbbbb");
});
}); */
//$(document).ready()简写形式：$()
$(function(){
alert("Hello
World!");
});
</script>
</head>
<body>
<input type="button" id="btn"
value="click">
</body>
</html>
四、jQuery 对象与 DOM 对象
DOM 对象：HTML的文档对象模型中的元素对象。可通过 javascript 的以下方法获取
document.getElementById("test")
document.getElementsByTagName("p")
jQuery 对象：经jQuery包装后的DOM对象
$("#test")
$("p")
jQuery 对象转成 DOM 对象
var $test = $("#test");
var test = $test[0]; //jQuery对象是一个数组，可通过索引得到DOM对象
或
var test = $test.get(0); //用jQuery提供的get(index)方法得到DOM对象
DOM对象转jQuery对象
var test =
document.getElementById("test");
var $test = $(test); //用jQuery的工厂方法
<!DOCTYPE html>
<html>
<head>
<title>jQuery与dom相互转换.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//1 把jQuery对象转换为dom对象
/* var
btn=$("#btn")[0];
btn.onclick=function(){
alert("aaaaa");
} */
//2 把dom对象转换为jQuery对象
var btn=document.getElementById("btn");
var $btn=$(btn);
$btn.click(function(){
alert("bbbb");
});
});
</script>
</head>
<body>
<input type="button" id="btn"
value="click">
</body>
</html>
如果jQuery 与其它库有冲突：
可以使用jQuery.noConflict(); 让出$使用权，然后用 jQuery 而不用 $
<!DOCTYPE html>
<html>
<head>
<title>jquery关键字冲突.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../js/test.js"></script>
<script type="text/javascript">
//1.只会执行一次$()，里面的所有当做方法参数，没有起作用
/*
$(function(){
alert("aaaaa");
$();
}); */
//2. jQuery正常执行，test也正常执行
jQuery(function(){
alert("aaaaa");
$();
});
//3.完美方式
var $j=jQuery.noConflict();
$j(function(){
alert("cccc");
$();
});
</script>
</head>
</html>
被包含的test.js内容：
function
$(){
alert("这是test.js文件中的提示信息");
}
Jquery语法基础的更多相关文章
- 新知识：JQuery语法基础与操作
jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...
- jQuery语法基础&选择器
jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...
- jQuery基础(1) -- jQuery 语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions).jQuery 语法jQuery 语法是通过选取 HTML 元素,并对选取 ...
- jQuery的基础语法实例
jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...
- jQuery 语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). jQuery 语法实例 $(this).hide() 演示 jQuer ...
- web前端基础——jQuery编程基础
1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...
- JQuery：JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
- jQuery之基础核心（demo)
jQuery之基础核心 作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...
- jQuery语法、选择器、效果等使用
1．jQuery语法 1.1 基础语法:$(selector).action( ) 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 acti ...
随机推荐
- 解析Qt元对象系统(五) Q_INVOKABLE与invokeMethod（automatic connection从Qt4.8开始的解释已经与之前不同，发送对象驻足于哪一个线程并不重要，起到决定作用的是接收者对象所驻足的线程以及发射信号（该信号与接受者连接）的线程是不是在同一个线程）good
概述查看Qt源码可知,Q_INVOKABLE是个空宏,目的在于让moc识别. 使用Q_INVOKABLE来修饰成员函数,目的在于被修饰的成员函数能够被元对象系统所唤起. Q_INVOKABLE与QMe ...
- Swift版本UIWebView长按保存图片
起因 最近需要做个IOS的壳子,用到长按保存图片的功能,发现百度出来的全是OC语法的例子,很多都不是全面,只能自己写一份Swift版本的,图片下面附上Github地址 效果图 Github地址:htt ...
- Shuffle'm Up(串)
http://poj.org/problem?id=3087 题意:每组3个串,前两个串长度为n,第三个串长度为2*n,依次从第二个串(s2)中取一个字符,从第一个串(s1)中取一个字符,...... ...
- js中 if不判断解决方式
$(function() { $("#number").blur(function() { var number = $('#number').val(); var num = $ ...
- TPshop规格组合错误
TPshop规格组合错误 修改: admin/logic/goodslogic.class.php 中 方法:getSpecInput() 中 asort($spec_arr_sort) 去掉
- [转]RDLC 动态列
本文转自:http://blog.csdn.net/luochengbang/article/details/9964551 很久没有写博客了,关于动态列,国内很少资料有介绍动态列的,所想写点心得给哥 ...
- SQLServer2008 在where条件中使用CASE WHEN
create table #temp( id int identity(1,1), name varchar(20), startYear int, startMonth in ...
- Get 和 Post
理论: Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而 ...
- 收集五款常用的HTML编辑软件
HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言.HTML文本是由HTML命令组成的描述 ...
- oracle 提示登录密码过期解决
1.登录到oracle的 服务器 2.切换到oracle 用户 3.设置到当前操作的实例名:export ORACLE_SID=XXX 4.连接数据库的命令行模式:sqlplus /nolog 5.s ...