JQuery学习第二天-耐性真的重要

Posted 2021-04-08 JAVA代码之美

设置属性 - attr()

jQuery attr()方法也用于设置/改变属性值。

 

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3SchooljQuery Tutorial"
  });
});

 

添加新的 html 内容

我们将学习用于添加新内容的四个jQuery 方法：

• append() - 在被选元素的结尾插入内容

• prepend() - 在被选元素的开头插入内容

• after() - 在被选元素之后插入内容

• before() - 在被选元素之前插入内容

 

 

functionafterText(){

vartxt1="<b>I </b>";                    // 以 HTML 创建元素

vartxt2=$("<i></i>").text("love ");     // 通过 jQuery 创建元素

vartxt3=document.createElement("big"); // 通过 DOM 创建元素

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素

}

 

删除元素/内容

如需删除元素和内容，一般可使用以下两个jQuery 方法：

• remove() - 删除被选元素（及其子元素）

• empty() - 从被选元素中删除子元素

 

$(document).ready(function(){

  $("button").click(function(){

   $("p").remove(".italic");

  });

});

 

jQuery 操作 CSS

jQuery拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() - 向被选元素添加一个或多个类

• removeClass() - 从被选元素删除一个或多个类

• toggleClass() -     对被选元素进行添加/删除类的切换操作

• css() - 设置或返回样式属性

 

<script>

$(document).ready(function(){

  $("button").click(function(){

   $("h1,h2,p").addClass("blue");

   $("div").addClass("important");

  });

});

</script>

<styletype="text/css">

.important{

font-weight:bold;

font-size:xx-large;

}

.blue{

color:blue;

}

</style>

 

 $("p").css("background-color")

 

 

$(document).ready(function(){

 $("button").click(function(){

   $("p").css({"background-color":"yellow","font-size":"200%"});

  });

});

 

jQuery 尺寸 方法

jQuery提供多个处理尺寸的重要方法：

• width()

• height()

• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

 

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

 

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

 

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

 

 

$(document).ready(function(){

 $("button").click(function(){

   $("#div1").width(320).height(320);

  });

});

JQuery遍历

 

 

遍历 DOM

jQuery提供了多种遍历 DOM 的方法。

遍历方法中最大的种类是树遍历（tree-traversal）。

 

向上遍历 DOM 树

这些jQuery 方法很有用，它们用于向上遍历 DOM 树：

• parent()返回第一个父元素

• parents()返回所有父元素，可加一个参数，返回指定的父元素

• parentsUntil()返回范围内的父元素

 

jQuery find() 方法

find()方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有<span> 元素：

 

children()方法返回被选元素的所有直接子元素。

该方法只会向下一级对DOM 树进行遍历。

 

在 DOM 树中水平遍历

有许多有用的方法让我们在DOM 树进行水平遍历：

• siblings()返回被选元素的所有同胞元素。

   ·   next()返回被选元素的下一个同胞元素。该方法只返回一个元素。

• nextAll()返回被选元素的所有跟随的同胞元素

• nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素。

• prev()

• prevAll()

• prevUntil()

 

 

三个最基本的过滤方法是：first(),last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

 

 

first() 方法返回被选元素的首个元素。素的所有跟随的同胞元素返回介于两个给定参数之间的所有跟随的同胞元素。

 

jQuery last() 方法last() 方法返回被选元素的最后一个元素。

 

jQuery eq() 方法eq() 方法返回被选元素中带有指定索引号的元素。

 

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

 

 

jQuery filter() 方法

filter()方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

 

 

jQuery not() 方法

not()方法返回不匹配标准的所有元素。

提示：not()方法与 filter() 相反。

 

jQuery load() 方法

jQueryload() 方法是简单但强大的 AJAX 方法。

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

 

$(selector).load(URL,data,callback);

 

 

jQuery 选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname"  的元素
.class	$(".intro")	所有 的元素
element	$("p")	所有  <p> 元素
.class.class	$(".intro.demo")	所有 且 的元素
:first	$("p:first")	第一个  <p> 元素
:last	$("p:last")	最后一个  <p> 元素
:even	$("tr:even")	所有偶数  <tr> 元素
:odd	$("tr:odd")	所有奇数  <tr> 元素
:eq(index)	$("ul  li:eq(3)")	列表中的第四个元素（index 从  0 开始）
:gt(no)	$("ul  li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul  li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 <h1>  - <h6>
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的  <p> 元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于  "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于  "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以  ".jpg" 结尾的元素
:input	$(":input")	所有  <input> 元素
:text	$(":text")	所有  type="text" 的 <input> 元素
:password	$(":password")	所有  type="password" 的 <input> 元素
:radio	$(":radio")	所有  type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有  type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有  type="submit" 的 <input> 元素
:reset	$(":reset")	所有  type="reset" 的 <input> 元素
:button	$(":button")	所有  type="button" 的 <input> 元素
:image	$(":image")	所有  type="image" 的 <input> 元素
:file	$(":file")	所有  type="file" 的 <input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

 

 

.blur() 表单元素失去焦点。 

 .change() 表单元素的值发生变化 

 .click() 鼠标单击 

 .dblclick() 鼠标双击 

 .focus() 表单元素获得焦点 

 .focusin() 子元素获得焦点 

 .focusout() 子元素失去焦点 

 .hover() 同时为mouseenter和mouseleave事件指定处理函数 

 .keydown() 按下键盘（长时间按键，只返回一个事件） 

 .keypress() 按下键盘（长时间按键，将返回多个事件） 

 .keyup() 松开键盘 

 .load() 元素加载完毕 

 .mousedown() 按下鼠标 

 .mouseenter() 鼠标进入（进入子元素不触发） 

 .mouseleave() 鼠标离开（离开子元素不触发） 

 .mousemove() 鼠标在元素内部移动 

 .mouseout() 鼠标离开（离开子元素也触发） 

 .mouseover() 鼠标进入（进入子元素也触发） 

 .mouseup() 松开鼠标 

 .ready() DOM加载完成 

 .resize() 浏览器窗口的大小发生改变 

 .scroll() 滚动条的位置发生变化 

 .select() 用户选中文本框中的内容 

 .submit() 用户递交表单 

 .toggle() 根据鼠标点击的次数，依次运行多个函数 

 .unload()  

 

 $.trim() 去除字符串两端的空格。

 $.each() 遍历一个数组或对象。 

 $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。 

 $.grep() 返回数组中符合某种标准的元素。  

 $.extend() 将多个对象，合并到第一个对象。  

 $.makeArray() 将对象转化为数组。 

 $.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。 

 $.isArray() 判断某个参数是否为数组。 

 $.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。 

 $.isFunction() 判断某个参数是否为函数。 

 $.isPlainObject() 判断某个参数是否为用"{}"或"newObject"建立的对象。 

 $.support() 判断浏览器是否支持某个特性。 

 

  当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放