(1)JQuery基础核心

一、知识点简记:

1、JQuery的兼容性非常好,不需要考虑不同浏览器的兼容问题。

2、主流的JavaScript库:YUI、Prototype、Mootools、Dojo、ExtJS(加载页面卡,付费)。

3、JQuery2.0不再支持IE6/7/8。

4、完全不支持IE6:网易云课堂。

5、"$"是JQuery对象,JQuery特有的对象。

6、使用"$"符号和"jQuery"是恒等的。

7、$(function(){

alert($);//返回的是jQuery对象的内部

alert($());//返回JQuery对象

alert($(‘#box‘));//返回JQuery对象

alert($(‘#box‘).css(‘color‘,‘red‘));//返回JQuery对象

$(‘#box‘).css(‘color‘,‘red‘).css(‘font-size‘,‘200px‘).css(‘font-weight‘,‘blod‘);

//既然能返回jQuery对象,那么在一个css()之后还能继续添加css样式,例如上一行所示

});

8、为什么要使用$(function(){});这段代码进行首尾包裹?原因是我们的JQuery库文件是在body元素之前加载的,我们必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。

9、$(document).ready(function(){});简写为$(function(){});一般不用window.onload。

10、如果有其他库引入之后会造成一些符号的冲突,比如一个b库里面也有$符号,那么我们可以将JQuery对象的$(即JQuery对象)换个变量名:

var  $$=jQuery;

另一种方法是:

jQuery.noConflict();//将$所有权限剔除

剔除$所有权之后,原来的$的get方法无效,那么可以写上下面一句:

var $$=jQuery;//然后alert($$(‘#box‘).get(0));

二、demo

简单项目结构:

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>JQuery</title>
	<script type="text/javascript" src="jquery-1.11.1.js"></script>
	<script type="text/javascript" src="demo.js"></script>
  </head>

  <body>
	<!-- <input type="button" value="button"/> -->
	<div id="box">基础核心</div>
  </body>
</html>

demo.js文件:

/*$(function(){

	$('input').click(function(){
		alert("JQeury程序");
	});
});*/

/*$(function(){

	$('#box').css('color','red');//将添加一个行内的css样式

});*/

/*jQuery(function(){

	$('#box').css('color','red');//将添加一个行内的css样式

});*/

/*$(function(){

	alert($);//返回的是jQuery对象的内部
	alert($());//返回JQuery对象
	alert($('#box'));//返回JQuery对象
	alert($('#box').css('color','red'));//返回JQuery对象
	$('#box').css('color','red').css('font-size','200px').css('font-weight','blod');

});*/

/*window.onload=function(){
	$('#box').css('color','red');

};
*/

/*
 * //只打印出2,不打印1,因为覆盖了前面的值
 *
 * window.onload=function(){
	alert(1);

};

window.onload=function(){
	alert(2);

};
*/

/*
//这里先打印1再打印2,没有被覆盖
$(document).ready(function(){

	alert(1);
});

$(document).ready(function(){
	alert(2);
});*/

$(function(){

	alert($('#box'));//返回JQuery对象
	alert(document.getElementById('box'));//[object HTMLDivElement],原生DOM对象
	alert($('#box').get(0));//获取原生的dom对象,获取第一个id为box的元素
	alert($(document.getElementById('box')));//返回JQuery对象,Jquery对象和Dom对象之间的互换
});
时间: 2024-10-06 15:53:49

(1)JQuery基础核心的相关文章

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

JQuery基础核心

一.代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: <script src="../jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"

基础核心

 代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: jQuery基础核心.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery基础核心</title>

Jquery的学习(二)基础核心

1.学习要点: 1.代码风格 2.加载模式 3.对象互换 一.代码风格: 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $('#box'); //进行执行的ID元素选择 $('#box').css('color', 'red'); //执行功

jQuery学习笔记之一——jQuery入门与基础核心

因为工作的原因,所以自学了下jQuery,这里以李炎恢老师的教程为自觉教程,并记录学习中遇到的问题. 教程下载地址: http://www.verycd.com/topics/2956408/ 课件下载地址: http://download.csdn.net/download/ip_kv3000/8986013 jQuery类库下载地址: http://jquery.com/ jQuery入门  优势.历史.版本我就不多说了,网上有的是.至于为什么学,因为很有用,为什么非要学他,因为微软加入到了

jQuery之基础核心(demo)

jQuery之基础核心 作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javascript基础,又刚刚接触jQuery的初学者.(如有错误,请指正)咱们从基础语法说起,基础语法是:$(selector).action() 美元符号$定义jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操

JQuery基础知识(2)

JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选的 callback 参数是滑动完成后所执行的函数名称. 2.JQuery slideUp();用于向上滑动元素 语法: $(selector).slideUp(speed,callback

jQuery基础,选择器

jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的cs

Web前端JQuery基础

JQuery知识汇总 一.关于Jquery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨     是"write Less,Do More",即倡导      写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模       式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuer