jQuery笔记_每个<ul>的-CSDN博客

本文链接：https://blog.csdn.net/weixin_37710293/article/details/78073482

$("ul li:first")：每个 <ul>的第一个 <li> 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head") id="intro" 的 <div> 元素中的所有 class=”head” 的元素

jQuery 事件
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）$ (selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件$ (selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
fadeIn() 用于淡入已隐藏的元素。
fadeOut() 方法用于淡出可见元素。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
使用 toggle() 方法来切换 hide() 和 show() 方法
滑动方法：slideDown() slideUp() slideToggle()
animate() 方法用于创建自定义动画。$(selector).animate({params},speed,callback);
默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

操作多个属性（逗号隔开）

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
当动画 100% 完成后，即调用 Callback 函数。

获得内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取属性 - attr()

设置内容
text(“内容”) - 设置或返回所选元素的文本内容
html(“内容”) - 设置或返回所选元素的内容（包括 HTML 标记）
val(“内容”) - 设置或返回表单字段的值
设置属性 - attr() $(“#w3s”).attr(“href”,”http://www.w3school.com.cn/jquery“);

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

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

jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回被选元素的一个或多个样式属性。

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

下面的例子设置指定的

元素的宽度和高度：

$("button").click(function(){
  $("#div1").width(500).height(500);
});

DOM树：
祖先：
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
后代：
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
同胞：
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
过滤：
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 “intro” 的所有 <p> 元素：
$(document).ready(function(){$ (“p”).filter(“.intro”);
});
not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。

jQuery AJAX 实例：
在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。（可不要）
可选的 callback 参数是 load() 方法完成后所执行的函数名称。（可不要）
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。$.get(URL,callback);
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。$.post(URL,data,callback);

如果其他 JavaScript 框架也使用 $符号作为简写怎么办？ noConflict() 方法会释放会$ 标识符的控制，这样其他脚本就可以使用它了。
当然，您仍然可以通过全名替代简写的方式来使用 jQuery。
您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。var jq=$.noConflict();
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行！");
  });
});

难点：
jQuery 是客户端脚本库
jQuery html() 方法适用于 HTML 和 XML 文档。错误
$(“div#intro .head”) 选择器选取哪些元素？id=”intro” 的首个 div 元素中的 class=”head” 的所有元素

jQuery 是 W3C 标准吗？No

jQuery笔记

“相关推荐”对你有帮助么？