前端学习---jQuery

最新推荐文章于 2024-03-13 19:12:18 发布

秇淰~浮笙

最新推荐文章于 2024-03-13 19:12:18 发布

阅读量570

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44264744/article/details/104324692

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.1，jQuery简介

1.2，jQuery函数&对象

1.3，jQuery选择器（selector）

1.4，jQuery过滤器

1.5，jQuery DOM 事件

1.6，jQuery效果

1.1，jQuery简介

定义：jQuery是一个轻量级的JS库，拥有大量插件plugins，兼容所有浏览器
功能：HTML 元素选取/元素操作/事件处理，CSS操作，JS特效动画，链式调用，读写合一，AJAX，Utilities
引入：<script type="text/javascript" src="jquery-1.10.2.min.js"></script> //版本2以上不支持IE6，7，8 下载官网

1.2，jQuery函数&对象

jQuery函数：$()/jquery() console.log(jQuery===$) //true

----------------作为函数使用：$(param)--------------
$(document).ready(function(){   //1)参数为函数：当DOM加载完成后，执行回掉函数  $(function(){ 
   $("button").click(function(){  //2)参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
      var div = document.getElementsByTagName('div');
      var $div = $(div);  //3)参数为DOM对象：将dom对象封装成jQuery对象
      var $inp = $('<input type="text" name="dd"/>') 
   });  //4)参数为html标签：创建标签对象并封装成jQuery对象
});
---------------作为对象使用：$.xxx( )-------------
$(selector).action()         // 操作定义
$("p").hide()                //隐藏所有段落

jQuery对象：执行jQuery函数返回的就是jQuery对象，一般在变量前加$表示

--------------jQuery对象转化为DOM对象------------
$('div')[0];  //jQuery对象后添加数值下标即可选择其获取到的JQuery类数组对象中相应位置存放的DOM对象
--------------DOM对象转化为JQuery对象----------------
var div = document.getElementsByTagName('div');    //多个div返回的是一个DOM类数组对象
var $div = $(div);    //将DOM对象作为jQuery函数的参数即可将该DOM对象转化为jQuery对象

1.3，jQuery选择器（selector）

选择器	功能	选择器	功能
$("*")	选取所有元素	$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$(this)	选取当前 HTML 元素	$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素	$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("[href]")	选取带有 href 属性的元素	$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素	$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素	$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
CSS选择器相关知识链接： https://blog.csdn.net/weixin_44264744/article/details/104132573

1.4，jQuery过滤器

基本过滤器（Basic Filters）	解释	内容过滤器	定义
selector:first	选中元素的第一个元素	selector:contains(’ text ')	文本包含text的selector元素
selector:last	..最后一个元素	selector:empty	没有子标签的selector元素
selector:even	..索引为偶数元素	selector:parent	有子节点的selector元素
selector:odd	..索引为奇数元素	selector:has(selector2)	包含selector2的元素
selector:eq(index)	..索引为index的元素	属性过滤器	定义
selector:lt(index)	..索引值小于index的元素	selector[attr]	具有属性attr的元素，如id
selector:gt(index)	..索引值大于index的元素	selector[attr=Val]	属性值为Val的元素
selector1:not(：selector2) ？	..中不为selector2的元素	selector[attr^=Val]	属性值为以Val开头
selector:header	..中所有标题元素	selector[attr$=Val]	属性值为以Val结尾
:animated	所有正在执行动画效果的元素	selector[attr*=Val]	属性值中包含Val
var input_query=$("input:first"); //获取最后一个input元素		*var input_query=$("input[id][name='ext']");**
表单选择器 Forms	定义	可见性过滤器	定义
:input	查找所有input元素	selector:visible	查找所有可见的selector元素
:text	查找所有文本框元素	selector:hidden	查找所有隐藏的selector元素
:password	查找所有密码框元素	子元素过滤器	定义
:checkbox /:radio	查找所有复/单选框	selector:nth-child(n)	所有父中排第n的selector元素
:submit	查找所有提交按钮元素	selector:first-child	所有父的所有子中排第一的元素
:image	查找所有图像域元素	selector:last-child	所有父的所有子中排最后的元素
:reset	查找所有重置按钮元素	selector:only-child	所有父中唯一的selector元素
:button	查找所有按钮元素	表单过滤器 Form Filters	定义
:file	查找所有文件域元素	selector:enabled	查找所有可用的元素
var button_query=$(":button"); //查找所有按钮元素		selector:disabled	查找所有不可用的
selector:selected	查找所有选中的下拉框	selector:checked	查找所有选中的单选复选框

1.5，jQuery DOM 事件

鼠标事件	功能	键盘事件	功能	文档/窗口事件	功能
click()	单击	keypress()	键盘按下事件	load()
dblclick()	双击	keyup()	键盘抬起事件	resize()	改变大小
hover()	悬停	keydown()	按下过程	scroll()	滚动
mousedown()	按下	表单事件	功能	unload()
mouseup()	松开	submit()	表单提交事件，绑定from	举例
mouseenter()	穿过	change()	元素值改变时激发的事件
mouseleave()	离开	focus()	聚焦
mousemove()	移动	blur()	失焦
mouseover() mouseout()	移入/出 --含子元素	select()	选择

1.6，jQuery效果

效果	功能	效果	功能
show([speed],[function])	显示	fadeIn([speed],[callback])	淡入显示
hide([speed],[function])	隐藏	fadeOut([speed],[callback])	淡出隐藏
toggle([speed],[function])	显示+隐藏	fadeToggle([speed],[callback])	淡入淡出
slideUp([speed],[function])	上滑隐藏页面	fadeTo([speed],[opacity],[callback])	渐变指定透明度
slideDown([speed],[function])	下滑显示页面	opacity指定透明度 0~1	[ ] 可选
slideToggle([speed],[function])	上下滑动	speed显示的时间 ms	function ---slow(

<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
</body>
</html>

效果：-----》

--------html---------
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
-------jquery--------
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

----->

1.7，元素属性

attr(key[,value]) ：获取/[设置]属性[值]
removeAttr(name)：移除指定属性
css(key[,value]) ：获取指定名称的CSS [给指定名称的css属性设置值，多个用{ }]
val/text/html([“xxx”])：获取[设置]value/文本/html代码值

$(document).ready(function(){        
   $("input[name='text1']").attr("disabled","disabled"); //使name为text1的文本框不可用
   $("input[name='text1']").removeAttr("disabled"); //使name为text1的文本框可用
   console.log($("div").html()); //获取到的内容是<a>aaa</a>，如果是text，则只获取aaa 
   $("#btn").click(function(){
        $("div").css("background-color","red"); //设置div的背景颜色为红色
   });
});

1.8，Ajax

的

秇淰~浮笙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习---jQuery

一，1.1，jQuery简介定义：jQuery是一个轻量级的JS库，拥有大量插件plugins，兼容所有浏览器功能：HTML 元素选取/元素操作/事件处理，CSS操作，JS特效动画，链式调用，读写合一，AJAX，Utilities 引入：<script type="text/javascript" src="jquery-1.10.2.m...
复制链接

扫一扫