Jquery学习笔记,全面实用,需要的可以留下邮箱,给大家发原稿文档
JQuery
第一章:Jquery概念介绍
1.1 Jquery介绍
(1)并不是一门新语言。将常用的、复杂的操作进行函数化封装,直接调用,大大降低了使用JavaScript的难度,改变了使用JavaScript的习惯。
(2)常用插件网站:www.jq22.com
(3)导入jquery插件两种方法:
1、网上插件: <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
2、官网下载,本地导入: <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
1.2 Jquery和JScript对比
JS的缺点:(1)选择器功能弱;
(2)DOM操作繁琐
(3)浏览器兼容性不好
(4)动画功能弱
Jq的优点:(1)有强大的选择器
(2)DOM操作简便
(3)浏览器兼容性好
(4)有丰富的插件支持,强大的动画效果
第二章:Jq的引入及js互相转换
(1)获取对象区别:
var varjs = document.getElementById("uname");
var varjq = $("#uname");
(2)js转换为jq
var varjq = $(varjs);
(3)jq转换为js
方法一:var varjs = varjq.get(0);
方法二:var varjs2 = varjq[0];
注:jq所有对象均为数组类型
val():返回或设置被选中元素的值,即value的值
第三章:JavaQuery常用选择器
3.1 五种基本选择器
(1)标签选择器
例如:$("div").css("color","red");
(2)Id选择器
例如:$("#unameid")
(3)类选择器
例如:$(".classname")
(4)通配选择器
例如:$("*")
(5)组合选择器
例如:$("#unameid,h3,.myclass");
3.2 四种层级选择器
(1)后代选择器
例如:$("#ul01 li").css("font-size","30px");
$("#ul01 li").css("color","blue");
(2)父子选择器
例如:$("#div03 > h3")
(3)后面第一个兄弟元素
注:必须紧挨当前元素,中间不能 插入其他标签
例如:$("#div03 + div").css("background-color","blue");
(4)后面所有兄弟元素
例如:$("#div03 ~ div").css("background-color","red");
3.3 七种属性选择器
(1)元素名[attribute]:包含一个属性
例如:$("div[id]").css("background-color","red");
(2)元素名[attribute][attribute]:同时包含两个属性
例如:$("div[id][class]").css("background-color","gray");
(3)元素名[属性=value]:一个属性,且属性名=xx值
例如:$("div[class=myclass]").css("color","gold");
(4)元素名[属性!=value]:一个属性,且属性不等于value值
例如:$("div[class!=myclass]").css("background-color","aqua");
(5)元素名[属性^=value]:一个属性,以xx开头
例如:$("div[class^=my]").css("background-color","black");
(6)元素名[属性$=value]:一个属性,以xx结尾
例如:$("div[class$=2]").css("background-color","black");
(7)元素名[属性*=value]:包含xx值
例如:$("div[class*=c]").css("background-color","black");
3.4 九种位置选择器
(1)匹配找到的第一个元素:first
例如:$("tr:first")
(2)匹配找到的最后一个元素:last
例如:$("tr:last")
(3)选择除了xx之外的选择器:not
例如: $("div:not(#div02)")
(4)匹配所有索引值为偶数的元素:even
注:从0开始计数
例如:$("tr:even")
(5)匹配所有索引值为奇数的元素:odd
注:从0开始计数
例如:$("tr:odd")
(6)匹配一个给定索引值的元素:eq(index)
例如: $("tr:eq(1)")
(7)匹配所有大于给定元素索引值的元素:gt(index)
注:不包括本索引代表的元素
例如: $("tr:gt(0)")
(8)匹配所有小于小于给定索引值的元素:lt(index)
注:不包括本索引代表的元素
例如: $("tr:lt("+($("tr").length-1)+")")
(9)匹配如h1、h2、h3之类的标题元素:header
例如:$(":header")
3.5 四种内容选择器
(1)匹配包含给定文本的元素:contains(text)
例如:$("div:contains(div02)")
(2)匹配所有不包含子元素或文本的空元素:empty
例如: $("td:empty")
(3)匹配含有选择器所匹配的元素的元素:has(selector)
例如:$("div:has(h1)")
(4)匹配含有子元素或者文本的元素:parent
例如:$("td:parent")
3.6 两种可见性选择器
<body>
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
</body>
(1)匹配所有的不可见元素:hidden
例如:$("tr:hidden")
(2)匹配所有的可见元素:visible
例如:$("tr:visible")
3.7 四种子元素选择器
(1)匹配相关子元素:nth-child()
例如:$("div h3:nth-child(odd)").css("color","#0000FF");
$("div h3:nth-child(even)").css("color","#0000FF");
$("div h3:nth-child(2n+1)").css("color","#0000FF");//n从0开始
(2)匹配第一个元素:first-child
例如:$("div h3:first-child").css("color","#0000FF");
(3)匹配最后一个元素:last-child
例如:$("div h3:last-child").css("color","#0000FF");
(4)匹配唯一一个子元素:only-child:
例如: $("div h3:only-child").css("color","#0000FF");
3.8 表单选择器
(1)匹配所有的input、textarea、select、button元素: :input
例如:$(":input").addClass("myClass");
(2)所有的单行文本框: :text
例如:$(":text").addClass("myClass");
(3)所有的密码框: :password
(4):radio :checkbox :submit :reset
:botton :file
(5):hiddle 匹配所有的不可见元素,或者type为hidden的元素
例如:$("input:hidden").val()
3.9 四个表单对象属性选择器
(1):select 下拉框
例如:$("select option:selected").text()
(2):checked 复选框
例如:$("input:checked").val()
(3):enabled
例如:$(":enabled").addClass("myClass")
(4):disabled
例如:$(":disabled").addClass("myClass")
第四章 Jquery操作DOM
4.1 取值与赋值
(1)html()取值 html(txt) 赋值 相当于JS中innerHTML
取值:$("#div01").html() ,取出所有文本,包括html
赋值:$("#div01").html('<font style="color: gold;">hello word</font> '),会将文本中的html解析进行显示
(2)text()取值 text(txt) 赋值 相当于JS中innerText
取值:$("#div01").text(),仅仅取出文本,不包括html
赋值:$("#div01").text('<font style="color: gold;">hello word</font> ');会将html标签当做普通文本进行赋值
(3)val() 取值 val(val) 赋值 相当于JS中value
例如:$("#textid").val()
4.2 Jquery操作元素属性
(1)获取属性值:attr(attr)
例如:$("#unameid").attr("name")
(2)给指定属性赋值:attr(attr,val)
例如:$("#unameid").attr("value","李四")
(3)去掉指定属性:removeAttr(attr)
例如:$("#unameid").removeAttr("id")
(4)获取属性值:prop(prop)
例如:$("#unameid").prop("name")
赋值:prop(prop,val)
例如:$("#unameid").prop("value","王五")
(5)对符合条件的元素逐个处理:each(index)
function testeach(){
$("input[name=fav]").each(function(index){
//alert(index);
alert(this.value);
})
}
注:jQuery 1.6增加了.prop()方法。
如 checked, selected、readonly、disabled 使用prop()等,返回值是true或者false更加方便处理。
例如: $("#submitid").prop("disabled",!($("#checkid").prop("checked")));
4.3 Jquery操作DOM节点
示例代码:
<body>
<ol id="olid">
<li id="li01">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ol>
<div id="div01"></div> <hr />
<input type="button" value="添加子节点" onclick="addchild()"/>
</body>
(1)在末尾添加子元素:append()、appendTo()
例如:
例如:var varli = $("<li class='liclass'>西安</li>")
$("#olid").append(varli);
varli.appendTo($("#olid"));
(2)添加子元素前置:prepend()、prependTo()
例如:$("#olid").prepend(varli)
varli.prependTo($("#olid"))
(3)添加平级元素(前面)insertBefore()、before()
例如:var vardiv = $("<div>div02</div>")
vardiv.insertBefore($("#div01"));
$("#div01").before(vardiv);
(4)添加平级元素(后面)insertAfter()、after()
例如:vardiv.insertAfter($("#div01"));
$("#div01").after(vardiv);
(5)替换某个节点replaceWith()、replaceAll()
例如:var varli = $("<li>郑州</li>");
$("#li01").replaceWith(varli);
varli.replaceAll($("#li01"));
(6)删除元素:remove()
例如:$("#olid").remove()
(7)删除子元素:empty()
例如:$("#olid").empty();
4.4 Jquery操作CSS样式
(1) css(css,val)
例如:$("#divId").css("background-color",“red”)
(2)css({css1:val1,css2:val2,…..})
例如:$("#divId").css({"background-color":"red","color":"gold"});
4.5 Jquery操作类样式
(1) hasClass(class) 判断当前对象是否有这个样式(类的样式)--返回是boolean类型的值
例如:$("#divId").hasClass("myclass")
(2)addClass(class) 添加样式, 而不是覆盖类样式
例如:"#divId").addClass("myclass myclass2"
(3) removeClass(class) 移除样式,如果()不写移除的样式默认移除所有的样式
例如:$("#divId").removeClass("myclass")
(4)toggleClass(class) 切换样式
例如:$("#divId").toggleClass("myclass myclass2");
第五章 Jquery动画效果
(1)显示:show()
例如:$("#img01").show(3000)
(2)隐藏:hide()
例如: $("#img01").hide(3000)
(3)从上到下显示:slideDown()
例如: $("#div01").slideDown(3000)
(4)从下到上隐藏:slideUp()
例如: $("#div01").slideUp(3000)
(5)淡入:fadeIn()
例如: $("#img01").fadeIn(3000)
(6)淡出:fadeOut()
例如: $("#img01").fadeOut(3000)
注:3000代表延时时间,3秒
第六章 Jquery事件
(1)点击事件:click()
鼠标移动事件:mousemove()
鼠标移出事件:mouseout()
当鼠标指针位于元素上方时:mouseover()
(2)事件绑定
bind():jquery1.7版本之前使用
live():在jquery1.9版本删除
on():jquery1.7版本出现,推荐使用
on()优势:统一接口,提高性能。
事件绑定两种方式:
//1 直接 对象.事件()
/*$("#aid").click(function(){
$("#divid").css("display","block");
}).mouseout(function(){
$("#divid").css("color","red");
$("#divid").css("font-size","30px");
});*/ //2 on() 使用on绑定事件
/*$("#aid").on("click",function(){
$("#divid").css("display","block");
}).on("mouseout",function(){
$("#divid").css("color","red");
$("#divid").css("font-size","30px");
})*/
(3)解除绑定
unbind():
传参代表解除指定事件
无参代表默认解除所有事件
//4 unbind() 解绑
function testunbind(){
//$("#aid").unbind();//不传参表示解除所有事件,
$("#aid").unbind("mouseenter");
}
Jquery学习笔记,全面实用,需要的可以留下邮箱,给大家发原稿文档的更多相关文章
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之插件开发(4)
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
随机推荐
- LOJ2778 [BOI2018]基因工程 随机化
题面 不想写了...留坑吧... 基本思想可参照随机化解决判同问题的总结 代码: #include<bits/stdc++.h> using namespace std; #define ...
- 趣谈Linux操作系统学习笔记:第二十七讲
一.文件系统的功能规划 1.引子 咱们花了这么长的时间,规划了会议室管理系统,这样多个项目执行的时候,隔离性可以得到保证. 但是,会议室里面被回收,会议室里面的资料就丢失了.有一些资料我们希望项目结束 ...
- DOM操作 三大家族
clientHeight 获取对象的高度,不计算任何边距.边框.滚动条,但包括该对象的补白. clientLeft 获取 offsetLeft 属性和客户区域的实际左 ...
- Android Studio 之 ROM【3】,LiveData+ViewModel+AsyncTask+Repository+RecyclerView
教程地址:https://www.bilibili.com/video/av65180549 源码地址:https://github.com/longway777/Android-2019-Tutor ...
- STL源码剖析 阅读笔记
结构图:
- 【Kubernetes学习之一】Kubernetes 简介
环境 centos 7 一.概念和组件Kubernetes是Google开源的一个容器编排引擎,它支持自动化部署.大规模可伸缩.应用容器化管理,简称k8s. 1.Master Kubernetes中的 ...
- Python【每日一问】20
问: [基础题]: 企业发放的奖金根据利润提成.利润(I): 低于或等于10万元时,奖金可提10%: 高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%: ...
- AQS2--出队
队列不卡死,一定要:前面节点变成头结点唤醒时候能够唤醒后面节点,依次类推. 设置前面节点=-1就是为了前面节点走的时候,唤醒自己. 正常没有阻塞节点,设置前面=-1,再旋转一次尝试获取锁,才阻塞.即使 ...
- 【转】JavaScript 高性能数组去重
原文地址:https://www.cnblogs.com/wisewrong/p/9642264.html 一.测试模版 数组去重是一个老生常谈的问题,网上流传着有各种各样的解法 为了测试这些解法的性 ...
- SQLServer ---------- 安装SQLserver数据库
1.安装SQLserver 数据2008 的地址 https://jingyan.baidu.com/article/948f592434b407d80ef5f97d.html?qq-pf-to=pc ...