jQuery杂谈|Java前端学习笔记

痛定思痛。 2022-01-19 23:37 269阅读 0赞

## 1.jQuery对象 ##

jQuery包装集对象

获得mydiv的Jquery对象：

var divJquery = $("#mydiv");复制代码

## 2.基础选择器 ##

1、ID选择器  
格式：$("\#id属性值")  
获取指定id值的对象(只会获取到第一个id的值)  
2、类选择器  
格式：$(".class属性值")  
获取所有指定class属性值的元素  
3、元素选择器  
格式：$("元素名/标签名")  
获取所有指定标签名的元素  
4、通用选择器  
格式：$("\*")  
获取所有的元素的对象  
5、组合选择器  
格式：$("选择器1,选择器2...")

## 3.层次选择器 ##

后代选择器 ancestor descendant $("\#parent div")选择id为parent的元素的所有div元素

var houdai = $("#parent div");复制代码

子代选择器 parent > child $("\#parent>div")选择id为parent的直接div子元素

var zidai = $("#parent > div");复制代码

相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素

var xl = $("#child + p");复制代码

同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

var tb = $(".gray ~ img");复制代码

## 4.表单选择器 ##

表单选择器，所有表单元素

var inputs = $(":input"); 复制代码

元素选择器

var inputs2 = $("input");复制代码

## 5.过滤选择器 ##

:checked 选择所有被选中的元素

:eq(index) 匹配指定下标的元素  
:gt(index) 匹配下标大于指定值的所有元素  
:odd 选择每个相隔的（奇数） 元素  
:even 选择每个相隔的（偶数） 元素

## 6.操作元素的属性 ##

获取属性的值  
attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr('checked')  
attr('name')  
prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')  
  
设置属性的值  
attr(属性名称,属性值);  
prop(属性名称,属性值);  
  
移除属性  
removeAttr(属性名) 移除指定的属性 removeAttr('checked')  
  
如果属性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他属性使用attr();

## 7.操作元素的样式 ##

设置元素的class属性（如果属性不存在，则添加属性）

$("#conRed").attr("class","red");复制代码

如果属性存在，则修改属性值

$("#conBlue").attr("class","green");复制代码

addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准

$("#conRed").addClass("larger");复制代码

css() 添加一个具体样式 css("样式名","样式值")

$("#remove").css("color","red");复制代码

同时添加多个具体的样式名 css(\{"样式名":"样式值","样式名":"样式值"\})

$("#remove").css({
         "color":"red","font-family":"楷体","background-color":"gray"})复制代码

## 8.操作元素的内容 ##

html() 获取元素的html内容  
html("html,内容") 设定元素的html内容  
text() 获取元素的文本内容，不包含html  
text("text 内容") 设置元素的文本内容，不包含html  
val() 获取元素value值  
val(‘值’) 设定元素的value值

## 9.添加元素 ##

创建元素  
$("元素内容")  
添加元素  
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。  
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头  
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。  
$(content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部  
before()  
在元素前插入指定的元素或内容:$(selector).before(content)  
after()  
在元素后插入指定的元素或内容:$(selector).after(content)

## 10.删除元素 ##

remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。  
empty() 清空所选元素的内容

## 11.遍历元素 ##

each()  
$(selector).each(function(index,element)) :遍历元素  
参数 function 为遍历时的回调函数，  
index 为遍历元素的序列号，从 0 开始。  
element是当前的元素，此时是dom元素。

## 12.ready事件 ##

1.ready()加载事件  
ready()类似于 onLoad()事件  
ready()可以写多个，按顺序执行  
$(document).ready(function()\{\})等价于$(function()\{\})  
  
onload与ready()的区别：  
1、ready()在DOM结构解析完毕后即执行  
2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行

本文来自知乎：上海尚学堂Java学员 彭耀庭