Web前端新人笔记之jquery入门心得(新手必看)

本章将为大家介绍以下几点内容;

1、jquery的主要特点;

2、建立jquery的编码环境;

3、简单jquery脚本示例;

4、选择jquery而不是纯javaScript的理由;

5、常用的jquery开发工具;jquery能做什么?

① 取得文档中的元素

$('div.content').find('p');

② 修改页面的外观

$('ul > li:first').addClass('active');

③ 改变文档内容

$('#container').append('<a href="www.baidu,com">more</a>')

④ 为页面添加动态效果

$('div.content').slideDown();

⑤ 响应用户的交互操作

$('button.show-details').click(function(){
  $('div.details').show();
});

⑥ 无需刷新页面从服务器获取信息

$('div.details').load('more.html #content');

⑦ 简化常见的javaScript任务

$.each(obj, function(key,value)(total += value;)); 

jquery为何如此出色?

1、利用了CSS的优势;
2、支持扩展;
3、抽象浏览器不一致;
4、总是面向集合;
5、将多重操作基于一行;

如何下载jquery?

1、由于JavaScript是一种解释语言,所以不必担心编译和构建。什么时候需要使用jquery,只要在HTML文档中使用<script>元素把它导入进来即可。

2、jquery官网:http://jquery.com/

都有哪些开发测试工具?

现代浏览器中一般内置了高质量的开发工具,我们可以选择自己觉得方便的工具,一下列出了一些推荐工具:

1、IE;
2、Safari;
3、Chrome;
4、Firefox;
5、Opera;

上面列出来的这些工具都提供了类似的功能:

1、探测及修改DOM;
2、研究CSS及页面变现之间的关系;
3、通过特殊的方法方便的跟踪脚本执行;
4、暂停脚本执行及检查变量值

以上这篇Web前端新人笔记之jquery入门心得(新手必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-05-14

jQuery Ajax使用心得详细整理及注意事项

IE7及以下请求方式用GET的话,URL的限制是个很容易忽视的问题(最大2083个字符).所以如果URL有可能过长的话,一定要用POST. -------------------------------------------------------------------------------- 终止Ajax请求 终止请求需要调用XMLHttpRequest对象的abort()方法 而在jQuery中的$.get,$.post.$.ajax.$.getJSON.$.getScript...的

关于Jqzoom的使用心得 jquery放大镜效果插件

下面是完整的代码 jqzoom打包下载地址 复制代码 代码如下: <html> <head> <title>JQzoom Demo</title> <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../js/jqzoom.pack.1.0.1.js"

全面详细的jQuery常见开发技巧手册

本文为大家整理一篇很详尽的jQuery常见开发技巧文章,供大家参考,具体内容如下 1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的d

15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

本文总结述了15个值得开发人员关注的jQuery开发技巧和心得.非常精辟实用!分享给大家供大家参考,具体如下: 在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! 1. 尽量使用最新版本的jQuery类库 jQuery项目中使用了大量的创新.最好的方法来提高性能就是使用最新版本的jQuery.每一个新的版本都包含了优化的bug修复.对我们来说唯一要干的就是修改tag,何乐而不为呢? 我们也可以使用免费的CDN服务,例如, Google来存放j

Jquery ThickBox插件使用心得(不建议使用)

大家可以使用官方推荐的一下几个插件 复制代码 代码如下: While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives. * colorbox * jQueryUI Dialog * fancybox * DOM window * shadowbox.js 做项目中发现facebox如果快速单击两下,容易出现黑屏.而且facebox的框架是用table写

jQuery 使用个人心得

$("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中 控件 $("#ID #ID") // 通过控件ID取其中的控件 $("标签.class样式名") //通过class来取控件 $(&

jQuery 研究心得 取得属性的值

如何取得属性的值? Html: <div Bruce="Yes">sss</div> 取得属性自定义属性 Bruce 的值: alert($("div[@Bruce]").attr("Bruce")); 取得属性Bruce为Yes的Div的内容: alert($("div[@Bruce]").html()); alert($("div[@Bruce=Yes]").html());

30个经典的jQuery代码开发技巧

本文实例总结了30个经典的jQuery代码开发技巧.分享给大家供大家参考.具体如下: 1. 创建一个嵌套的过滤器 复制代码 代码如下: .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 复制代码 代码如下: var allItems = $("div.item"); var keepList = $("div#container1 div.item")

php+jquery编码方面的一些心得(utf-8 gb2312)

php 文件应存为ANSI,要改编码时可用代码调. 复制代码 代码如下: //编码为gb2312,目前大部分网页还是用gb2312,少部分用utf-8, //www.baidu.com竟然两个都用,所以读取baidu的网页怎么搞都没问题 header('Content-Type: text/html; charset=gb2312'); //编码为utf-8 header('Content-Type: text/html; charset=gb2312'); //编码xml为utf-8,不过好像

关于jQuery UI 使用心得及技巧

1 jQuery UI 2 为我所用 2.1 Tabs 2.2 Accordion 2.2.1 使用基本的Accordion 2.2.2 实现打开多个标签 2.2.3 Accordion的嵌套 3 给插件应用主题--Theme Roller 3.1 更改配色 3.2 更改图标 4 相关连接 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行jQuery代

jQuery常见开发技巧详细整理

1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge

jquery easyui使用心得

第一步下载jquery easyui 下载地址:http://www.jb51.net/codes/70218.html 第二步创建Java web项目 第三步导入相关的文件..目录结构如下 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" rel="ext

60个很实用的jQuery代码开发技巧收集

由于内容比较多建议用CTRL+F搜索 偶然在网上看到这些不错的jQuery代码开发技巧.原文收集了30个,另外查找的时候发现了还有20个.加上另外十个实用的jQuery代码片段,共60个代码技巧,收集在一起分享给大家. 1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var allItems = $("div.item"); var keep

一些实用的jQuery代码片段收集

下边这些jQuery片段只是很少的一部分,如果您在学习过程中也遇到过一些常用的jQuery代码,欢迎分享.下边就让我们看看这些有代码片段. 1.jQuery得到用户IP: 复制代码 代码如下: $.getJSON("http://jsonip.appspot.com?callback=?", function (data) { alert("Your ip: " + data.ip); }); 2.jQuery查看图片的宽度和高度: 复制代码 代码如下: var t

非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】

本文实例总结了非常实用的jQuery代码段.分享给大家供大家参考,具体如下: 检测IE浏览器 在进行CSS设计时,IE浏览器对开发者及设计师而言无疑是个麻烦.尽管IE6的黑暗时代已经过去,IE浏览器家族的人气亦在不断下滑,但我们仍然有必要对其进行检测.当然,以下片段亦可用于检测其它浏览器. $(document).ready(function() { if (navigator.userAgent.match(/msie/i) ){ alert('I am an old fashioned In

jQuery EasyUI开发技巧总结

jQuery EasyUI开发技巧总结 1.使用tabs时,如果使用的不是url,而是content,则要嵌入iframe addTab({ title:node.text, closeable:true, content:'<iframe src="'+url+'" frameborder="0" style="border:0;width:100%;height:99%"></iframe> }); 1)外部调用ifr

10个很棒的jQuery代码片段

图片预加载 (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.

分享12个实用的jQuery代码片段

jQuery是一款优秀的JavaScript库,它在WEB开发者和网页设计师中非常出名,帮助网页设计师开发出很多有创意和漂亮的WEB页面. 本文主要分享了12个有用的jQuery技巧,具体内容如下 下面是我收集的一些小技巧,这些技巧将帮助你提高你网站布局和应用的创意性以及功能性. 一.在新窗口打开链接 用这个代码,你点击超文本链接时会在新窗口中打开,为用户带来更好的体验: $(document).ready(function() { //select all anchor tags that h

高效的jQuery代码编写技巧总结

最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验.谨以此文来提醒自己. 其次在脑子里牢牢记住jQuery就是javascript.这意味着我们应该采取相同的编码惯例,风格指南和最佳实践. 当你准备使用jQuery,我强烈建议你遵循下面这些指南: 缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存.