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结构绘制完后就执行

编写个数

不能编写多个
window.onload=function(){};
window.onload=function(){};

此时第二个覆盖第一个

能同时编写多个
$(document).ready(function(){}); $(document).ready(function(){});

两个函数都执行

简化写法

无

$( )

<!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语法基础的更多相关文章

  1. 新知识：JQuery语法基础与操作

     jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...

  2. jQuery语法基础&选择器

    jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...

  3. jQuery基础(1) -- jQuery 语法

    通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions).jQuery 语法jQuery 语法是通过选取 HTML 元素,并对选取 ...

  4. jQuery的基础语法实例

    jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...

  5. jQuery 语法

    通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). jQuery 语法实例 $(this).hide() 演示 jQuer ...

  6. web前端基础——jQuery编程基础

    1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...

  7. JQuery：JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  8. jQuery之基础核心（demo)

    jQuery之基础核心     作者的热门手记 jQuery之基础核心(demo)   本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...

  9. jQuery语法、选择器、效果等使用

    1．jQuery语法 1.1 基础语法:$(selector).action( ) 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 acti ...

随机推荐

  1. Single document interface和Multiple document interface

    https://en.wikipedia.org/wiki/Single_document_interface https://msdn.microsoft.com/en-us/library/b2k ...

  2. 关于函数提升在if语句中的表现

    函数声明创建的函数在现代浏览器,在if语句中函数的声明不会提升,但是在老的IE版本中,if语句中的函数声明会提升 函数表达式在不同浏览器中函数声明都不会被提升,解决了不同浏览器的兼容性问题 关于函数提 ...

  3. myeclipse2014 破解步骤

    1.打开破解文件夹Myeclipse 2014 patch,运行run.bat文件 2.在破解界面中,usercode随便输入, systemid 在右边的SystemId按钮处,点击. 将自动生成一 ...

  4. invoke与call

    “调用一个委托实例” 中的 “调用” 对应的是invoke,理解为 “唤出” 更恰当.它和后面的 “在一个对象上调用方法” 中的 “调用” 稍有不同,后则对应的是call.在英语的语境中,invoke ...

  5. jsp页面导入excel文件的步骤及配置

    上传使用flash插件 需要jquery.uploadify.min.js,uploadify.css,poi-ooxml-3.8-20120326.jar等 jsp页面: <%@include ...

  6. Redis学习笔记（四）-数据类型之list类型

    redis的list类型其实就是一个每个子元素都是string类型的双向链表.所以[lr]push和[lr]pop命令的算法时间复杂度都是O(1).另外list会记录链表的长度.所以llen操作也是O ...

  7. Java实现九宫格

    import java.util.Scanner; public class Sudoku { public static void main(String[] args) { System.out. ...

  8. c++ 中一个类或者一个对象所占的字节数

    转载博客:转载地址https://www.cnblogs.com/JingHuanXiao/p/6080726.html 一个空的class在内存中多少字节?如果加入一个成员函数后是多大?这个成员函数 ...

  9. C# 网页内容获取

    private string GetGeneralContent(string strUrl) { string strMsg = string.Empty; try { WebRequest req ...

  10. vue向数组中动态添加数据

    vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...