JS学习(4)---jQuery元素及属性

热爱健体的程序猿

于 2020-02-20 19:51:10 发布

阅读量135

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_41565013/article/details/104416537

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery

语法
jQuery选择器是 $,$ 就是jQuery对象,基础语法:$(selector).action()

文档就绪事件有两种写法:

$(document).ready(function(){
    
});
   	或
$(function(){
    
});
这两者等同于window.onload = function(){}
不同在于window.onload在所有内容包括图片加载好才会执行
而jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行

选择器
- 元素选择器
  $(“p”): 选择所有p标签的元素
- #id 选择器
  $("#test") : 选择id为test的元素
- .class 选择器
  $(".test"): 选择class为test的选择器
- 其他

语法	描述
$("*")	选取所有元素
$(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[target!=’_blank’]”)	选取所有 target 属性值不等于 “_blank” 的元素
$(":button")	选取所有 type=“button” 的 input 元素和 button 元素

jQuery效果
显示效果
- hide(speed,callback) 和 show(speed,callback) 方法来隐藏和显示 HTML 元素
- - 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称
  - - toggle(speed,callback) 显示被隐藏的元素，并隐藏已显示的元素
淡入效果
- fadeIn(speed,callback):淡入
- fadeOut(speed,callback):淡出
- fadeToggle(speed,callback):根据目前状态淡入或淡出
- fadeTo(speed,opacity,callback): fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
滑动效果
- slideDown(speed,callback):向下滑动
- slideUp(speed,callback):向上滑动
- slideToggle(speed,callback):根据目前状态向上或向下
动画效果
- animate({params},speed,callback)方法用于创建自定义动画
- 必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。
- Callback 方法在效果完全实现后调用回调函数,如果不写callback方法,则在执行动画时就会执行接下去的代码

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

HTML
- 获取内容和属性
  - text() - 设置或返回所选元素的文本内容
  - html() - 设置或返回所选元素的内容（包括 HTML 标记）
  - val() - 设置或返回表单字段的值
  - attr(“key”) - 方法用于获取属性值。
  - text(“设置的文本”) - 设置所选元素的文本内容
  - html(“设置的文本”) - 设置所选元素的内容（包括 HTML 标记）
  - val(“设置的文本”) - 设置表单字段的值
  - attr(“key”,“value”) - 方法用于设置属性值。或者
```
	attr({
	  "href" : "http://www.runoob.com/jquery",
		  "title" : "jQuery 教程"
	})
```
  - text()、html() 以及 val() 的回调函数
    
    回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。返回值为需要设置的文本.
    
    attr() 的回调函数:
```
	$("#runoob").attr("href", function(i,origValue){
		return origValue + "/jquery"; 
	})
```
  - 添加/删除元素
    - append() - 在被选元素的结尾插入内容
    - prepend() - 在被选元素的开头插入内容
    - after() - 在被选元素之后插入内容
    - before() - 在被选元素之前插入内容
    - remove() - 删除被选元素（及其子元素）
    - empty() - 从被选元素中删除子元素
      
      下面的例子删除 class=“italic” 的所有p元素:$("p").remove(".italic")
  - 获取并设置css类
    - addClass() - 向被选元素添加一个或多个类
    - removeClass() - 从被选元素删除一个或多个类
    - toggleClass() - 对被选元素进行添加/删除类的切换操作
    - css("propertyname","value") - 设置或返回样式属性
    - 同时设置多个属性$("p").css({"background-color":"yellow","font-size":"200%"})
  - 尺寸方法
  - width() - 方法设置或返回元素的宽度（不包括内边距、边框或外边距)
  - height() - 方法设置或返回元素的高度（不包括内边距、边框或外边距)
  - innerWidth() - 方法返回元素的宽度（包括内边距)
  - innerHeight() - 方法返回元素的高度（包括内边距）
  - outerWidth() - 方法返回元素的宽度（包括内边距和边框）
  - outerHeight() - 方法返回元素的宽度（包括内边距和边框）
jQuery遍历
- 祖先遍历
  - parent():返回被选元素的直接父元素
  - parents():返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
    
    也可以过滤,如:$("span").parents("ul");
  - parentsUntil():parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
    
    下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素如:
```
	$(document).ready(function(){
		$("span").parentsUntil("div");
	});
```
- 后代遍历
  - children():方法返回被选元素的所有直接子元素
    
    下面的例子返回类名为 “1” 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
```
$(document).ready(function(){
  $("div").children("p.1");
});
```
  - find():返回被选元素的后代元素，一路向下直到最后一个后代。
- 同胞遍历
  - siblings(): 方法返回被选元素的所有同胞元素。
  - next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素
  - nextAll() 方法返回被选元素的所有跟随的同胞元素
  - nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
    下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
```
	$(document).ready(function(){
		$("h2").nextUntil("h6");
	});
```
  - jQuery prev(), prevAll() & prevUntil() 方法
    prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已
- 过滤
  - first() 方法返回被选元素的首个元素,下面的例子选取首个 <div> 元素内部的第一个 <p> 元素
```
	$(document).ready(function(){
		$("div p").first();
	});
```
  - last() 方法返回被选元素的最后一个元素,下面的例子选取首个 <div> 元素内部的最后一个 <p> 元素
  - eq() 方法返回被选元素中带有指定索引号的元素,下面的例子选取第二个 <p> 元素（索引号 1）
```
	$(document).ready(function(){
		$("p").eq(1);
	});
```
  - filter() 不匹配这个标准的元素会被从集合中删除，下面的例子返回带有类名 “url” 的所有<p>元素
```
	$(document).ready(function(){
		$("p").filter(".url");
	});
```
  - not() 与filter相反

热爱健体的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习(4)---jQuery元素及属性

jQuery语法jQuery选择器是,,,就是jQuery对象,基础语法:$(selector).action()文档就绪事件有两种写法:$(document).ready(function(){ }); 或$(function(){ });这两者等同于window.onload = function(){}不同在于window.onload在所有内容...
复制链接

扫一扫

专栏目录