Jquery笔记

最新推荐文章于 2023-06-26 22:05:23 发布

Just丶九月

最新推荐文章于 2023-06-26 22:05:23 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

分类专栏： web相关文章标签： jquery基础语法

本文链接：https://blog.youkuaiyun.com/Silence_Sep/article/details/80437296

web相关专栏收录该内容

20 篇文章

订阅专栏

jQuery语法：是通过选取HTML元素，并对选取的元素执行某些操作。
$(selector).action()
eg:
$(this).hide();
$("p").show();

文档就绪事件：
所有的jQuery函数都位于一个document ready函数中（初始化操作）：
$(document).ready(function(){
//开始jQuery...
});
等价于：$(function(){

});

jQuery选择器：
1.元素选择器
$("p") : 在页面中选取所有的<p>元素；
2.#id 选择器
$("#test") :根据ID获取元素
3. .class选择器
$(".test") : 根据class获取元素

4.其它选择器
$("*") : 选取所有的元素
$("this") ：选取当前HTML元素
$("p.intro") :选取class为intro的<p>元素
$("p:first") :选取第一个p元素
$("ul li:first") :选取第一个<ul>元素的第一个<li>元素
$("ul li:first-child") :选取每个<ul>元素的第一个<li>元素
$("[href]") ：选取带有href属性的元素
$("a[target = '_blank']") :选取所有target属性值等于"_blank"的<a>元素
$("a[target ！= '_blank']")
$(":button") ：选取所有type = "button"的<input>元素和<button>元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
关于 : 和 [] 这两个符号的理解
：可以理解为种类的意思，如：p:first，p 的种类为第一个。
[] 很自然的可以理解为属性的意思，如：[href] 选取带有 href 属性的元素。

jQuery事件（主要）：

鼠标事件键盘事件表单事件文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

jQuery效果
隐藏显示：show(),hide(),toggle();
淡入淡出：fadeIn(),fadeOut(),fadeToggle(),fadeTo()
滑动 :slideDown(),slideUp(),slideToggle()
动画 : animate()
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
停止动画 : stop()

jQuery HTML
jQuery 捕获（获取/设置内容和属性）：
获得/设置内容 text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取/设置属性 attr() $("#runoob").attr("href")
$("#runoob").attr("href"，"www.")

jQuery-添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append()
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
结果是这样的:
<p>
<span class="s1">s1</span>
<span class="s2">s2</span>
</p>

after（）

<p>
<span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果是这样的:
<p>
<span class="s1">s1</span>
</p>
<span class="s2">s2</span>
总结：
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。

jQuery-删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery-获取并设置CSS类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
css("propertyname");
$("p").css("background-color");
css({"propertyname":"value","propertyname":"value",...});
$("p").css("background-color","yellow");

jQuery-尺寸
width() 返回元素的宽度（不包括内边距、边框或外边距）。
height() 返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 返回元素的宽度（包括内边距）。
innerHeight() 返回元素的高度（包括内边距）。
outerWidth() 返回元素的宽度（包括内边距和边框）
outerHeight() 返回元素的高度（包括内边距和边框）
outerWidth(true) 返回元素的宽度（包括内边距、边框或外边距）。
outerHeight(true) 返回元素的宽度（包括内边距、边框或外边距）。

jQuery-遍历

<div>

<ul>

<li> <li>

<span> <span> <b>

图示解析：
<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

jQUery 遍历-祖先

向上遍历 DOM 树 parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。

http://www.runoob.com/try/try.php?filename=tryjquery_parent

http://www.runoob.com/try/try.php?filename=tryjquery_parents

http://www.runoob.com/try/try.php?filename=tryjquery_parentsuntil

jQUery 遍历-后代

向下遍历 DOM 树 children() 方法返回被选元素的所有直接子元素。 find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

http://www.runoob.com/try/try.php?filename=tryjquery_children

http://www.runoob.com/try/try.php?filename=tryjquery_find2

jQuery 遍历 - 同胞(siblings)

在 DOM 树中水平遍历 siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()

http://www.runoob.com/try/try.php?filename=tryjquery_siblings

http://www.runoob.com/try/try.php?filename=tryjquery_next

http://www.runoob.com/try/try.php?filename=tryjquery_nextall

jQuery 遍历- 过滤

缩小搜索元素的范围 first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始

filter() 方法允许您规定一个标准。匹配的元素会被返回。

not() 方法与 filter() 相反

http://www.runoob.com/try/try.php?filename=tryjquery_first

http://www.runoob.com/try/try.php?filename=tryjquery_last

http://www.runoob.com/try/try.php?filename=tryjquery_eq

http://www.runoob.com/try/try.php?filename=tryjquery_filter

jQuery - AJAX load() 方法
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：$("#div1").load("demo_test.txt");

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：$("#div1").load("demo_test.txt #p1");

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});

jQuery - AJAX get() 和 post() 方法

$.get(URL,callback);
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});

$.post(URL,data,callback);
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});