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>

$(document).ready(function(){

$("button").click(function(){

//$(this).hide();

//$("p").hide();

//$("p.test").hide();

$("#test").hide();

});

</script>

</head>

<body>

</body>

</html>

二、jQuery 代码链式风格

a) 对于同一对象不超过3个操作，可直接写一行，添加必要注释。

b) 对同一对象的操作较多，建议每行写一个操作

<!DOCTYPE html>

<html>

<head>

$(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>

</body>

</html>

三、文档就绪函数：$(document).ready()

类似 window.onload，定义文档加载完后执行的函数。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。

案例

<!DOCTYPE html>

<html>

<head>

<title>MyHtml.html</title>

$(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结构绘制完后就执行
编写个数	不能编写多个 window.onload=function(){}; window.onload=function(){}; 此时第二个覆盖第一个	能同时编写多个 $(document).ready(function(){}); $(document).ready(function(){}); 两个函数都执行
简化写法	无	$( )

<!DOCTYPE html>

<html>

<head>

<title>与document对比.html</title>

//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>

</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>

$(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>

</body>

</html>

如果jQuery 与其它库有冲突：

可以使用jQuery.noConflict(); 让出$使用权，然后用 jQuery 而不用 $

<!DOCTYPE html>

<html>

<head>

<title>jquery关键字冲突.html</title>

//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 ...

随机推荐

C++<iomanip>控制符
C++<iomanip>控制符 c++ cout 输出格式在c++程序里面经常见到下面的头文件 #include <iomanip> io代表输入输出,manip是manip ...
IE兼容性測試軟件
对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,让我们一起看看这些很棒的工具. Spoon Browse ...
Spark2.0.2+Zeppelin0.6.2 环境搭建初探
0.抱怨与其他(此部分与标题没有太多联系): 首先一点想说的是版本问题,为什么标题我会写清楚版本号呢!原因就是版本不对真的很会坑人. 就在写这篇博客的同一天,我还写了另一篇,是 Hadoop2.7.3 ...
D - Replacement
Problem description Little Petya very much likes arrays consisting of n integers, where each of them ...
开启远程MySQL
安装完MySQL,由于安全原因默认是没有赋予用户远程权限的,所以第一步要首先赋予用户对应的权限一授权 mysql> mysql -u用户名 [-pIp地址] -p #登录 mysql> ...
利用MediaSession发送信息到蓝牙音箱
1.利用MediaSession发送信息到蓝牙音箱,如:播放音乐时接收的歌曲信息,但是每一首歌连续播放时,再次发送的重复信息会被丢弃.则利用MediaSession发现信息时,要保证信息的不重复性. ...
分布式文件管理系统MooseFS在centOS 7中的安装
首先,MooseFS是做什么的在这边不做具体详述,这边主要记录一下我在自己部署MooseFS中遇到的问题和步骤(大部分参考的其他博客或者资料) 首先是准备资源,MooseFS的最新安装包可以去官网下载 ...
Android studio 添加引用新建类库
1.新建一个工程包 2.修改AndroidManifest.xml 将AndroidManifest.xml 修改为 <manifest xmlns:android="http://s ...
Electron结合React开发环境遇到的问题
链接将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron 当在React中使用require('electron')时就会报TypeEr ...

Jquery语法基础

Jquery语法基础

Jquery语法基础的更多相关文章

随机推荐

热门专题