jQuery学习基础知识小结

jQuery学习笔记：

jQuery学习
1、基本语法：
$(selector).action()
$:定义jQuery
selector:选择符，查询和查找HTML元素
action():对元素执行的操作
实例：
$(this).hide()------隐藏当前元素
$("p"),hide()-------隐藏所有的p元素
$("#ID").hide()-----隐藏id=ID的元素
$("p.Class")--------隐藏class=Class的P

$(document).ready(function(){-----});
这样用为了防止文档未加载就运行jQuery代码。
2、选择器通过属性选择元素
$("[href]") 选择所有具有href属性的元素
$("[href='AA']") 选择属性href=‘AA'的元素
$("[href!='AA']")选择所有href！=‘AA'的元素
$("[href$='.jpg']")选取所有href值以.jpg结尾的元素
3、选择器选择Css属性
$("p").css("background-color","red"); 修改所有的p元素的背景颜色为红色
$("div#ID .Class") id=ID的div元素中所有class=Class的元素
4、名称冲突
var jQMy = jQuery.noConflict() yong jQMy代替$
5、常用事件
$(document).ready(function) 文档的就绪事件
$(selector).click(function) 被选元素的点击事件
$(selector).dblclick(function) 被选元素的双击事件
$(selector).focus(function) 被选元素获得焦点事件
$(selector).mouseover(function) 被选元素鼠标悬停事件
6、jQuery效果
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换（在隐藏与显示之间）被选元素
$(selector).slideDown() 向下滑动（显示）被选元素
$(selector).slideUp() 向上滑动（隐藏）被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画
参数："slow", "fast", "normal" 或毫秒
回调函数：callback
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
7、jQuery的HTML操作
$(selector).html(content) 改变被选元素的（内部）HTML
$(selector).append(content) 向被选元素的（内部）HTML 追加内容
$(selector).prepend(content) 向被选元素的（内部）HTML “预置”（Prepend）内容
$(selector).after(content) 在被选元素之后添加 HTML
$(selector).before(content) 在被选元素之前添加 HTML
8、jQuery的CSS操作
$(selector).css(name,value) 为匹配元素设置样式属性的值
$(selector).css({properties}) 为匹配元素设置多个样式属性
$(selector).css(name) 获得第一个匹配元素的样式属性值
$(selector).height(value) 设置匹配元素的高度
$(selector).width(value) 设置匹配元素的宽度
9、jQuery AJAX 请求
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件
(selector) jQuery 元素选择器语法
(url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项

赞 (0)

相关推荐

  • jQuery入门基础知识学习指南

    打开一个网页,如果 HTML 没有完全加载完毕,就去操作页面中元素是不安全的,但是监测 HTML 是否加载完毕呢?jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行. $(document).ready(function() { console.log('ready!'); }); 此外,它还有一个简写方式 $(function() { console.log('ready!'); }); $(document

  • jQuery入门介绍之基础知识

    jQuery入门介绍之基础知识

    JavaScript 库作用及对比 为了简化JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的Web2.0 特性的富客户端页面, 并且兼容各大浏览器 当前流行的JavaScript 库有: jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作

  • 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)     $('img[alt

  • jQuery基础知识filter()和find()实例说明

    jQuery基础知识filter()和find()实例说明

    首先 我们看.find()方法: 现在有一个页面,里面HTML代码为; 复制代码 代码如下: <div class="css"> <p class="rain">测试1</p> </div> <div class="rain"> <p>测试2</p> </div> 如果我们使用find()方法: var $find = $("div"

  • jquery基础知识第一讲之认识jquery

    jQuery是一个优秀的JavaScript库,它凭借简洁地语法和跨平台的兼容性,极大地简化了开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发Ajax操作. jQuery优势: 1.轻量级 2.强大的选择器 3.出色的DOM操作的封装 4.可靠的事件处理机制 5.完善的Ajax 6.不污染顶级变量 7.出色的浏览器兼容性 8.链式操作方式 9.隐式迭代 10.行为层与结构层分离 11.丰富的插件支持 12.完善的文档 13.开源 (1)编写简单的jQuery代码: 注:$ 就是jQ

  • jQuery学习基础知识小结

    jQuery学习笔记: jQuery学习 1.基本语法: $(selector).action() $:定义jQuery selector:选择符,查询和查找HTML元素 action():对元素执行的操作 实例: $(this).hide()------隐藏当前元素 $("p"),hide()-------隐藏所有的p元素 $("#ID").hide()-----隐藏id=ID的元素 $("p.Class")--------隐藏class=Cl

  • shell编程基础知识小结

    1.文件类型介绍linux系统中主要包括以下七种文件类型: d 目录 - 普通文件 l 符号链接 s 套接字文件 b 块设备文件 c 字符设备文件 p 命名管道文件 2.正则表达式正则表达式在shell编程中非常重要. 从一个文件或命令输出中抽取或过滤文本时.可使用正则表达式(RE),正则表达式是一些特殊或不很特殊的字符串模式的集合. 基本的元字符集:^ 只匹配行首.$ 只匹配行尾.* 一个单字符后紧跟*,匹配0个或多个此单字符.[] 匹配[]内字符,可以是一个单字符,也可以是字符序列.可以使用

  • Vue.js基础知识小结

    数据绑定 1.单向绑定 <div id="app"> {{massage}} </div> var app = new Vue({ el:"#app", data:{ message:"Hello,vue.js!" } 2.双向绑定 <div id="app"> <p>{{message}}</p> <input v-model="message&qu

  • Fireworks 基础知识小结

    PNG文件格式 很多人预测PNG(Portable Network Graphics可移植的网络图形)将以其在WEB上的优越文件格式取代象GIF和JPEG等传统的图象格式.PNG格式在处理WEB图形方面的确有其独到的长处: 1.无失真:不象JPEG图形文件,在将图片保存成PNG格式时,图象不会丢失任何的颜色信息. 2.高压缩率:PNG格式的文件甚至可以比GIF有更大的压缩率.  3.支持位透明:PNG支持alpher通道透明,alpher通道透明不同与Index索引颜色透明之处在于:Index索

  • javascript DOM 操作基础知识小结

    DOM添加元素,使用节点属性 DOM添加元素,使用节点属性 //涂聚文 geovindu@163.com var nr = 1; function addItem() { var list = document.getElementById("list"); var newNode = document.createElement("li"); var newLink = document.createElement("a"); newLink.

  • node.js基础知识小结

    javascript之前一般用于web前段开发,然而由于node.js的出现,用javascript开发后端程序也不再是一件复杂的事情.node.js中js引擎来自于chrome v8浏览器,配合node.js额外开发的工具代码,本身使用起来非常容易,也很高效.除此之外,node.js也有pip一样的工具npm,使用npm可以轻松地安装第三方软件,这给我们的开发工作带来了极大的方便.乘着周末,学习一下node.js,确实不错. 1.安装node.js sudo apt-get install n

  • javascript之正则表达式基础知识小结

    元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要用"\"来进行转移. 如果记不清楚那些标点符号需要转移,可以在使用标点符号时都使用反斜杠"\" 简单匹配 1.直接量 /javascript/ 匹配带有"javascript"的字符串 比如"javascript is an object-oriented scripting language" 2.[ ] /[abc]/ 匹配

  • python基础知识小结之集合

    集合 特点:集合对象是一组无序排列的可哈希的值:集合成员可以做字典的键,与列表和元组不同,集合无法通过数字进行索引.此外,集合中的元素不能重复.  定义 set() -> new empty set object set(iterable) -> new set object s = {0} 应用:去重 >>> lst1 = [1,1,2,2,3,4,2] >>> list(set(lst1)) [1, 2, 3, 4] 常用操作 集合支持一系列标准操作,包

随机推荐