为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Jquery(一)

在我们学习jquery之前,先要了解jquery是什么!

  • jQuery 是一个 JavaScript 库

  • jQuery 极大地简化了 JavaScript 编程。

  • jQuery 很容易学习。

会学到什么!

  • 在本教程中,您将通过教程以及许多在线实例,学到如何通过使用 jQuery 应用 JavaScript 效果。

  • jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。

  • 基本上,您将学习到如何选取 HTML 元素,以及如何对它们执行类似隐藏、移动以及操作其内容等任务。

需要具备的基础知识!

  • html

  • css

  • javascript

一、选择器

基本选择器:

$("*") // 选中所有元素 
$("#ceshi"); // 选中id为ceshi的元素
$(".ceshi"); // 选中class为ceshi的元素
$("div"); // 选中所有div元素
$("#ceshi > div:first"); // 选中id为ceshi下的第一个div元素
$("#ceshi, div"); // 选中id为ceshi的元素和所有div元素
$("div:first"); // 选中第一个div
$("div:last"); // 选中最后一个div
$("div:even"); // 选中索引为偶数的div(从0开始)
$("div:odd"); // 选中索引为奇数的div(从0开始)
$("div:eq(1)"); // 选中索引为1的div元素
$("div:gt(3)"); // 选中索引值大于3的div元素(不包括索引值为3的div元素)
$("div:lt(3)"); // 选中索引值小于3的div元素(不包括索引值为3的div元素)
$("input:focus"); // 选中当前聚焦的input元素
$("div:animated"); // 选中当前正在执行动画的div元素
$("div:hidden"); // 选中所有隐藏的div元素
$("div:visible"); // 选中所有可见的div元素
$("[id]"); // 选中所有带有id属性的元素
$("[class='ceshi']"); // 选中所有为ceshi类的元素
$("[class!='ceshi']"); // 选中所有不为ceshi类的元素
$("[class$='ceshi']"); // 选中所有带有ceshi字符的类

内容选择器:

$("div:contains('ceshi')"); // 选中文本带有ceshi的所有的div
$("div:empty"); // 选中所有不包含子元素或者空文本的div
$("div:parent"); // 选中所有包含子元素或者文本元素的div
$("div:has(p)"); // 选中所有包含p元素的div元素

表单选择器:

$(":input"); // 选中所有 input, textarea, select 和 button 元素
$(":text"); // 选中所有 type="text" 的 input元素
$(":password"); // 选中所有 type="password" 的 input 元素
$(":radio"); // 选中所有 type="radio" 的 input 元素
$(":checkbox"); // 选中所有 type="checkbox" 的 input 元素
$(":submit"); // 选中所有 type="submit" 的 input 元素
$(":reset"); // 选中所有 type="reset" 的 input 元素
$(":button"); // 选中所有 type="button" 的 input 元素
$(":file"); // 选中所有 type="file" 的 input 元素
$(":image"); // 选中所有 type="image" 的 input 元素 (出场率最低的type类型)
$(":enabled"); // 选中所有激活的input元素
$(":disabled"); // 选中所有禁用的input元素
$(":selected"); // 选中所有被选取的input元素
$(":checked"); // 选中所有被选中的input元素
$("#upparent_name").find("option:selected").text() // 获得id=upparent_name的下拉框选中的option的文本内容

二、属性操作

基本属性操作:


$("div").attr("class"); // 返回文档中所有div元素的class属性值
$("div").attr("class","ceshi"); // 设置所有div的class属性值为ceshi
$("div").removeAttr("class"); // 删除文档中所有div的class属性 (不建议使用)
$("img").removeProp("src"); // 删除img的src属性 (建议使用)
$("input[type='checkbox']").prop("checked", true); // 选择所有被选中的复选框
$("input[type='checkbox']").prop("checked", false); // 选择所有没被选中的复选框

CSS属性操作

$("div").addClass("selected"); // 为div元素加上 'selected' 类
$("div").removeClass("selected"); // 从div元素中删除 'selected' 类
$("div").toggleClass("selected"); // 如果存在就删除,否则就添加

HTML获取值和写入信息操作

  • .html()是用来读取元素的html内容(包括html标签);

  • .text()用来读取元素的纯文本内容,包括其后代元素;

  • .val()是用来读取表单元素的”value”值;

$('p').html(); // 返回p元素的html内容
$("p").html("ceshi <b>ceshi</b>!"); // 设置p元素的html内容
$('p').text(); // 返回p元素的文本内容
$("p").text("ceshi"); // 设置p元素的文本内容
$("input").val(); // 获取文本框中的值
$("input").val("ceshi"); // 设置文本框中的内容</pre>

三、jQuery对CSS的操作

样式:

$("p").css("color"); // 获得p元素的color属性值
$("p").css("color","green"); // 为p元素设置color为green
$("p").css({ "color": "green", "background": "yellow" }); // 为p元素设置字体颜色和背景颜色,设置多属性的时候要使用{}

位置:

$('p').offset(); // 获得p元素相对于当前视口的偏移(相对于浏览器左上角窗口)
$('p').offset().top; // 获得p元素距离当前视口顶部偏移值
$('p').offset().left; // 获得p元素距离当前视口左侧偏移值
$("p").position(); // 获得p元素相对于父元素的偏移位置(可见元素才有效)
$(window).scrollTop(); // 获取鼠标滚轮滑动的高度
$(window).scrollLeft(); // 获取鼠标滚轮滑动的宽度
$(window).scrollTop('100'); // 设置垂直偏移100
$(window).scrollLeft('100'); // 设置水平偏移100

大小尺寸:

$("p").height(); // 获取p元素的高
$("p").width(); // 获取p元素的宽
$("p:first").innerHeight(); // 获得第一个p元素的区域高度(包含上下padding,不包含上下border和margin)
$("p:first").innerWidth(); // 获得第一个p元素的区域宽度
$("p:first").outerHeight(); // 获得第一个p元素(包括padding,border,margin)
$("p:first").outerWidth(); // 获得第一个p元素
$("p:first").outerHeight(true); // 为true时包括边距

四、jQuery对文档的处理

内部插入:

$("p").append("<b>ceshi</b>"); // 在每个p元素内的最后面追加内容
$("<b>ceshi</b>").appendTo("p"); // 将内容追加到p元素的最后面
$("p").prepend("<b>ceshi</b>"); // 在每个p元素内的最前面追加内容
$("<b>ceshi</b>").prependTo("p"); // 将内容追加到p元素的最前面</pre>

外部插入:


$("div").after("&lt;p&gt'ceshi'&lt/p&gt"); // 在同级div元素的最后插入内容
$("div").before("&lt;p&gt'ceshi'&lt/p&gt"); // 在同级div元素的最前面插入内容
$("p").insertAfter("#ceshi"); // 所有p元素插入到id为ceshi元素的后面
$("p").insertBefore("#ceshi"); // 所有p元素插入到id为ceshi元素的后面

替换:

$("p").replaceWith("<b>ceshi. </b>"); // 将匹配到的所有p元素替换成<b>ceshi. </b>(可以是文档内容和标签元素)
$("<b>ceshi. </b>").replaceAll("p"); // 将元素或内容替换给所有选中的p元素

删除:

$("div").empty(); // 删除匹配的div元素中所有的子节点,不包括本身
$("div").remove(); // 删除所有匹配的元素,包括本身
$("div").detach(); // 删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

复制:

$("p").clone(); // 生成被选元素的副本,包含子节点、文本和属性
$("p").clone(true); // 可选,布尔值,规定是否复制元素的所有事件处理,默认地,副本中不包含事件处理器。

五、事件

页面载入事件(两种最常见的方式,推荐第一种方法):

// 方法一
$(document).ready(function () {

});
// 方法二
$(function () {

})

常用事件:

$("button").click(); // 单击事件
$("button").dblclick(); // 双击事件
$("input[type=text]").focus(); // input元素获得焦点时,触发focus事件
$("input[type=text]").blur(); // input元素失去焦点时,触发blur事件
$("button").mousedown(); // 当鼠标按下时触发事件
$("button").mouseup(); // 按钮上松开鼠标按键时触发的事件
$("p").mousemove(); // 当鼠标指针在指定元素中移动时触发的事件
$("p").mouseover(); // 当鼠标指针位于元素上方时触发事件
$("p").mouseout(); // 当鼠标指针从元素上方移开时触发事件
$(window).keydown(); // 当键盘按钮被按下时触发事件
$(window).keypress(); // 当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup(); // 当按钮松开时触发事件
$(window).scroll(); // 当窗口发生滚动时触发事件
$(window).resize(); // 当浏览器窗口大小发生改变时触发事件
$("input[type='text']").change(); // 当元素的值发生改变时触发事件
$("input").select(); // 当元素中的内容被选中时触发事件
$("form").submit(); // 当提交表单时触发事件
$(window).unload(); // 当用户离开页面时触发事件

(event object)对象,所有事件函数都可以传入event参数方便处理事件:

event.pageX // 事件发生时,鼠标距离网页左上角的水平距离
event.pageY // 事件发生时,鼠标距离网页左上角的垂直距离
event.type // 事件的类型
event.which // 按下了哪一个键
event.data // 在事件对象上绑定数据,然后传入事件处理函数
event.target // 事件针对的网页元素
event.preventDefault() // 阻止事件的默认行为(比如点击链接,会自动打开新页面)
event.stopPropagation() // 停止事件向上层元素冒泡
例:
$("p").click(function(event){
  alert(event.type); // 弹出"click"  
});

六、动画效果

基本:

$("p").show(); // 显示匹配的元素
$("p").show("slow"); // 参数表示速度,("slow","normal","fast"),也可为1000毫秒
$("p").hide(); // 隐藏匹配的元素
$("p").toggle(); // 切换匹配元素的显示和隐藏

滑动:

$("p").slideDown("1000"); // 用1000毫秒的时间将元素滑下
$("p").slideUp("1000"); // 用1000毫秒的时间将元素滑上
$("p").slideToggle("1000"); // 用1000毫秒的时间将元素滑上滑下

淡入淡出:

$("p").fadeIn("1000"); // 用1000毫秒的时间将元素淡入
$("p").fadeOut("1000"); // 用1000毫秒的时间将元素淡出
$("p").fadeToggle("1000"); // 用1000毫秒的时间将元素淡入淡出
$("p").fadeTo("slow", 0.6); // 用900毫秒的时间将元素的透明度调整到0.6

对象访问控制:

$.trim(); // 去除字符串两端的空格
$.each(); // 遍历一个数组或对象,for循环
$.inArray(); // 返回一个值在数组中的索引位置,不存在返回-1  
$.grep(); // 返回数组中符合某种标准的元素
$.extend(); // 将多个对象,合并到第一个对象
$.makeArray(); // 将对象转化为数组
$.type(); // 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)
$.isArray(); // 判断某个参数是否为数组
$.isEmptyObject(); // 判断某个对象是否为空(不含有任何属性)
$.isFunction(); // 判断某个参数是否为函数
$.isPlainObject(); // 判断某个参数是否为用"{}"或"new Object"建立的对象
$.support(); // 判断浏览器是否支持某个特性
点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消