JQuery基础语法小结

 在日常开发中JQuery是我们使用最频繁的JS库。使用JQuery进行开发,你需要先了解JQuery的基本语法。下面是在学习JQuery时总结的一些简单语法。

 
 

1、$(document)将document对象转换为jquery

 

代码如下:

$(document).ready(function(){
alert("hello world");
});

 

2、获取所有的超链接对象,并且增加onclick事件;其实在底层jquery对象获得的每个标签的数组,因此我们不需要进行循环了

 

代码如下:

$(document).ready(function(){
$("a").click(function(){
alert("hello world");
});
});

 

3、jquery对象与dom对象之间的转换

 

代码如下:

$(document).ready(function(){
var javascriptElement = document.getElementById("clickme");
//将dom对象转换为jquery对象
var jqueryElement = $(javascriptElement);
//alert("javascript:" + javascriptElement.innerHTML);//innerHTML获取标签的内容
//alert("jquery:" + jqueryElement.html());
//将jquery转换为dom对象方式一
var jElement = $("#clickme");
var javascriptEle = jElement[0];
alert("jquery1: " + javascriptEle.innerHTML);
//方式二
var javascriptEle2 = jElement.get(0);
alert("jquery2: " + javascriptEle2.innerHTML);
});

 

4、jquery解决id值是否存在的问题

 

代码如下:

<a id="hello">click me</a>
<script type="text/javascript">
//以传统方式解决id为空方式一
if(document.getElementById("helllo")) {
//如果hello不存在会出错
document.getElementById("helllo").style.color ="red";
}
//方式二
//$("#hello")[0].style.color="red";
//用jquery解决
$("#hello").css("color","red");
//如果只有一个参数,则此方法是读,如果是两个参数则是些功能(css(“”),css(“”,“”))
alert($("#hello").css("color"));
</script>

 

5、在javascript中规定,你要操作css属性时要将属性中的‘-'去掉,同时把后一个字母大写;如:background-color 要改成 backgroundColor

6、jquery中也使用选择器来操纵各种各样的元素。是继承了css的设计理念,但是把它更是发扬光大了;

7、jquery的几种书写形式

1> 方式一

 

代码如下:

$("document").ready(function(){
...
});

 

2> 方式二

 

代码如下:

$().ready(function(){
...
});

 

3> 方式三

 

代码如下:

$(function(){
...
});

 

以上几种方式是一样的

希望本文所述对大家学习jquery程序设计能有所帮助。

时间: 2024-09-30 19:10:36

JQuery基础语法小结的相关文章

JQuery基础语法小结_jquery

1.$(document)将document对象转换为jquery 复制代码 代码如下: $(document).ready(function(){     alert("hello world"); }); 2.获取所有的超链接对象,并且增加onclick事件:其实在底层jquery对象获得的每个标签的数组,因此我们不需要进行循环了 复制代码 代码如下: $(document).ready(function(){     $("a").click(function

jQuery基础语法实例入门_jquery

本文实例讲述了jQuery基础语法.分享给大家供大家参考.具体分析如下: 此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作. 复制代码 代码如下: $(selector).action() 下面就对以上语法规则进行详细的阐述: 1.$定义jQuery,将被选的DOM对象转换成jQuery对象. 2.selector是选择器,类似于CSS选择器. 3.action()是要对jQuery对象行的操作. 注: $是jQuery的简写.例如: 复制代码 代码如下: $("di

vue.js入门教程之基础语法小结_javascript技巧

前言 Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化. <!-- html --> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> new

jQuery基础知识小结_jquery

1.基础  jquery对象集:   $():jquery对象集合   获取jquery对象集中的元素:    使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0]    使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0)    使用jquery的eq方法获取jquery对象集中的jquery对象元素:     $('img[alt]').eq(0)   

PHP语法小结之基础和变量_php技巧

最近有个H5项目的需求,需要服务端,考察过后决定用PHP实现一个HTTP服务端,于是开始重温PHP语法,顺便记录一下要点,以便随时重温.内容摘抄自w3school的PHP手册,并按照自己的理解重新进行了整理. PHP是什么? PHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词 PHP 代码在服务器上执行,而结果以纯文本返回浏览器 PHP 文件能够包含文本.HTML.CSS 以及 PHP 代码 PHP 文件的后缀是 ".php" PH

JavaScript基础语法让人疑惑的地方小结_基础知识

复制代码 代码如下: /* JS基础语法中,几个比较容易让人疑惑的地方. */ /* == === */ function de() { var ab = 25; //数值 var ba = "25"; //字符串 if (ab == ba) { //==,会先转换,后比对. //alert("b"); } if (!(ab === ba)) { //===不会转换,而进行直接比对,ab是数值类型数据,而ba是字符串类型数据 //alert("a"

jquery基础教程之deferred对象使用方法

 jquery基础教程之deferred对象使用方法 一.什么是deferred对象?   开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的.   通常的做法是,为它们指定回调函数(callback).即事先规定,一旦它们运行结束,应该调用哪些函数.   但是,在回调函数方面,jQuery的功能非常弱.为了改变这一点,jQuery开发团队就设计了deferr

jQuery基础

jQuery 简介 jQuery的使用 jQuery的导入 本地导入 网络导入 jQuery 语法 基础语法 jQuery 选择器 jQuery ID选择器 jQuery CLASS选择器 jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器 jQuery查询其他节点 祖先 后代 兄弟 过滤缩写搜索元素的范围 jQuery 事件 jQuery 事件函数 jQuery HTML 获得内容和属性 获得内容 获取属性 设置内容和属性 设置内容 设置属性 - attr att

《jQuery移动开发》—— 1.2 jQuery基础知识

1.2 jQuery基础知识 jQuery移动开发 如果你熟悉JavaScript和CSS的编写,那么编写第一个jQuery脚本将是很熟悉的工作,但是可能会有一些奇怪的地方.jQuery框架是一个JavaScript程序库,也就意味着它是用JavaScript构建的.由于本质上仍然是编写JavaScript,所以基础是相同的,只是将以jQuery框架的方式编写.换句话说,对某些基本功能进行了改进,但是JavaScript的核心--变量.函数.条件语句等--没有变化.所以,仍然使用var关键字.i