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. Android 重写onBackPressed()方法 遇到的问题

    1.resultCode的值一直为0 问题描述:AActivity调用startActivityForResult()方法,启动BActivity,然后在BActivity的onBackPressed ...

  2. SQL 琐碎记录

    1. 查看mysql现在已提供什么存储引擎: SHOW ENGINES ; 2. 查看mysql当前默认的存储引擎: SHOW VARIABLES LIKE '%storage_engine%'; 3 ...

  3. Cosine Similarity of Two Vectors

    #include <iostream>#include <vector>#include <cmath>#include <numeric> templ ...

  4. Android检测代理

    1. System.getProperties().remove("http.proxyHost"); System.getProperties().remove("ht ...

  5. Django之ORM的增删改查操作流程

    总结:ORM的 查.增.删.改 - 查 - client - 有一个展示页面(xxx_show.html) - 这一个页面一输入执行后,get请求向server端发送 - 这个展示页面有添加按钮.删除 ...

  6. ROS-节点-Topic

    前言:本部分主要介绍ros一些基础功能的使用,包括创建和编译工作空间.功能包.节点以及话题. 第一种方式:使用roboware studio软件操作 1.1 创建工作空间 回车然后点击保存. 1.2 ...

  7. A - Diverse Team

    Problem description There are n students in a school class, the rating of the i-th student on Codeho ...

  8. windows phone媒体应用开发

    MediaElement 可以播放许多不同类型的音频和视频媒体. MediaElement 是一个可以在其表面显示视频的矩形区域,也可以播放音频.MediaElement 支持触控输入事件. 使用属性 ...

  9. 复习HTML+CSS(8)

    n  普通框架 框架技术:将一个浏览器划分成若干个小窗口,每个小窗口显示一个独立的网页. 框架集合框架页 u  框架集<frameset>:主要用来划分窗口的. u  框架页<fra ...

  10. JavaScript Array 整理 - 元素操作

    整理一下Array对象中针对元素操作的方法. 分别是: concat (组合数组) join(数组转字符串) pop(删除最后一个元素) shift(删除第一个元素) push(在数组尾部添加新元素) ...