JQuery一些基础笔记
JQuery学完了,总结一下一些需要掌握的知识点。
首先什么是JQuery 说白了就是有JavaScript衍生出来的一个产物,它呢兼容各种浏览器,但是前提你要用这个JQ的话首先呢你就要引入JQ库。
学过js的人在学jq你就会感觉jq简直是很简单的代码就给js的功能实现了。建议先去学一下js在来学jq这样会好理解一点。
一、基础
类似于js中的window.onload,是在窗体加载完成后在执行。
例:$(function()
{
alert("HelloWorld");
});
JQ元素和DOM元素呢就是JQ元素名是由$开头的,不带$的呢就是普通的js元素了
二、选择器
这个jq呢有很多选择器死记硬背呢确实不好记程序就是这样写多了自然而然的就会了
三、DOM
append()
-- 向元素中添加内容
appendTo()
-- 将元素添加到指定内容
包裹节点:
$(function()
{
$(“span”).wrap(“<strong></strong>”);
})
设置属性:
$("元素").attr({键值对});同样也可以设置css属性 $(“p”).attr(“class”,”high”);$("a:contains('link')").attr({"href":“index.html","title":"test"});
attr(这里是键值对)
追加样式:
$(“p”).addClass(“another”);toggle事件:
也就是相当于链接式点击事件第一次点击执行第一个函数块代码第二次点击执行第二个代码块,以此类推。
设置和获取HTML的文本值
1、html()
2、text()
3、val()
四、事件
1.bind()绑定事件 --- unbind()移出事件
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();
})
})
1.hover()用于光标的模拟,第一次悬停触发一次,鼠标移出在触发一次
$(function(){
$("#panel h5.head").hover(function(){
$(this).next().show();},function(){
$(this).next().hide();
})
})
2.toggle()被选中元素轮流响应click事件
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
五、动画
1.show() -- 显示
2.hide() -- 隐藏
3.fadeIn() -- 颜色逐渐变深
4.fadeOut() -- 颜色逐渐变浅
5.slideUp()-- 向上延伸
6.slideDown() -- 向下延伸
7.animated() -- 动画
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000);
})
这些动画可以和事件组合起来用
Ajax另外有介绍
JQuery一些基础笔记的更多相关文章
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- jQuery源代码学习笔记_工具函数_noop/error/now/trim
jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...
- HTML5基础——笔记
HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用
[DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用 jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...
- jQuery 插件基础
jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...
- Java基础笔记 – Annotation注解的介绍和使用 自定义注解
Java基础笔记 – Annotation注解的介绍和使用 自定义注解 本文由arthinking发表于5年前 | Java基础 | 评论数 7 | 被围观 25,969 views+ 1.Anno ...
- jquery插件开发基础入门
jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...
- php代码审计基础笔记
出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...
随机推荐
- Oracle 收缩表大小 Oracle Shrink Table --转载
从10g开始,oracle开始提供Shrink的命令,假如我们的表空间中支持自动段空间管理 (ASSM),就可以使用这个特性缩小段,即降低HWM.这里需要强调一点,10g的这个新特性,仅对ASSM表空 ...
- 62. Divide Two Integers
Divide Two Integers Divide two integers without using multiplication, division and mod operator. 思路: ...
- [转]CABasicAnimation用法
CABasicAnimation用法 CABasicAnimation 自己只有三个property fromValue toValue ByValue 当你创建一个 CABasicAni ...
- js实现日历卡
效果图如下 首先先添加简单的样式 <style type="text/css"> *{padding:0;margin:0;} #tab { margin:0 auto ...
- (Forward) Music Player: From UI Proposal to Code
Some developers have difficult to code when the UI proposal is a bit “sophisticated” or “complex”. M ...
- 用shell脚本切分task_list,并分别执行的脚本
#/bin/sh TASK_LIST=$ len=`wc -l $TASK_LIST | awk '{print $1}'` #noExce(){ ) ))'p' $TASK_LIST > $T ...
- jQuery鼠标事件汇总
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. 1.click事件:点击鼠标左键时触发 $('p').click(function(){}); 示例: $('p').click(func ...
- Devexpress VCL Build v2015 vol 15.2 开始测试
增加了几个小玩意,与大版本变化根本无法匹配. 具体可以官网了解 https://www.devexpress.com/Subscriptions/New-2015.xml?product=vcl
- DIRECTORY_SEPARATOR 和 PATH_SEPARATOR的区别
DIRECTORY_SEPARATOR:目录分隔符,linux上就是’/’ windows上是’\’ PATH_SEPARATOR:路径分隔符,include多个路径使用,在win下,当你要in ...
- flex 导出Excel功能实现
方法一: 1.Excel导出主要代码: try { var bytes: ByteArray = new ByteArray(); bytes.writeMultiByte(DataG ...