标签：JQuery function 元素 指定 笔记 学习 事件 选择器 属性
引入
Src标签
Dom对象与JQuery包装对象
只有JQ对象能使用JQ方法，$(xx) 把Dom对象包起来
基础选择器
ID选择器 #ID $(“#Id”) 选择Id为指定值的元素对象(多个返回数组)
类选择器 .Class $(“.Class”) 选class为指定值的元素对象
元素选择器 标签名/元素名 $(“标签/元素”) . 所有指定标签.
通用选择器 * $(“*”) 页面中所有元素对象
组合选择器 选择器1,选择器2,... $(“选择器1,选择器2”) 指定选择器中的元素对象
层次选择器
后代选择器
格式 父元素 指定元素 (空格隔开)
实例 $(“父元素 指定元素”)
选择 父元素的所有指定元素(包含第一代、第二代等)
子代选择器
格式 父元素>指定元素 (大于号隔开)
实例 $(“父元素>指定元素”)
选择 父元素的所有第一代指定元素
相邻选择器
格式 元素+指定元素
实例 $(“元素+指定元素”)
选择 元素的下一个指定元素(只找下一个，不存在则获取不到)
同辈选择器
格式 元素~指定元素
实例 $(“元素+指定元素”)
选择 元素的下一个指定元素(找到有为止)
表单选择器
表单选择器 :input 查找所有的Input元素:$(“:input”) 会匹配所有的input textarea select button
文本框选择器 :text ... ...
密码框选择器 :password ...
单选钮选择器 :radio ...
多选钮选择器 :checkbox
提交钮选择器 :sunmit
图像钮选择器 :image
重置钮选择器 :reset
文件域选择器 :file
按钮选择器 :button
操作元素的属性
属性的分类
固有属性:元素本身就有的属性(id name class style value...)
返回值是boolean的属性:checked selected disabled
自定义属性:用户自己定义的属性
Attr()和prop()的区别
1.如果是固有属性，attr()和prop()都能操作
2.自定义属性，attr()可操作，prop()不能操作
3.返回boolean的属性
若设置了属性，attr()返回具体的值，prop()返回true
若未设置属性，attr()返回undefined，prop()返回false
内容
1.获取属性 attr(“属性名”) prop(“属性名”)
2.设置属性 attr(“属性名” , ”属性值”) prop(“属性名” , ”属性值”)
3.移除属性 removeAttr(“属性名”);
总结
如果属性的类型是boolean，则使用prop()方法，否则使用attr()方法
操作元素的样式
attr(“class”) 获取元素的样式名
attr(“class”,”样式名”) 设置元素的样式 (设置的话原本的会被覆盖)
addClass(“样式名”) 添加样式(在原来的基础上添加，原有的保留，重复的以最后一次为准)
css(“class”) 添加具体的样式(行内样式)
css(“具体样式名”,’’样式值”); 设置单个样式
css({“具体样式名”:’’样式值”,“具体样式名”,’’样式值”}); 设置多个样式
removeClass(“样式名”) 移除样式
操作元素的内容
操作元素的内容
html() 获取元素的内容，包含html标签(非表单元素)
html(“内容”) 设置元素的内容，包含html标签(非表单元素)
text() 获取元素的纯文本内容，不识别html元素(非表单元素)
text(“内容”) 设置元素的纯文本内容，不识别html元素(非表单元素)
val() 获取元素的值(表单元素)
val(“值”) 设置元素的值(表单元素)
表单元素
文本框text 密码框password 单选框radio 复选框checkbox 隐藏域hidden 文本域textarea下拉框select
非表单元素
div、 span、 h1~h6、 table、 tr、 td、 li、 p等
创建元素和添加元素
创建元素
$(“内容”)
添加元素
1.前追加子元素
2.后追加子元素
3.前追加同级元素
4.后追加同级元素
注:
在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置
如果元素本身存在(已有元素)，会将原来元素直接剪切设置到指定位置
删除和遍历元素
删除元素
remove();
删除元素及对应的子元素，标签和内容一起删除
指定元素.remove();
empty();
清空元素内容，保留标签
指定元素empty();
遍历元素
each()
$(selector).each(function(index,element){
Index. element. sth(element) //do anying you want })
参数function为遍历时的回调函数
index为遍历元素的序列号，从0开始
element是当前的元素，此时是dom元素
ready加载事件
ready加载事件
预加载事件
当页面的dom结构加载完毕后执行
类似于js中的load事件
ready事件可以写多个
语法:
$().ready(function(){
//这样就会等元素加载完再执行，避免因为js先加载报错
})
简写
$(function(){
})
绑定事件
bind绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时的运行函数
语法:
$(selector).bind(
eventType[,eventData],
handler(eventObject)
);
eventType:是一个字符串类型的事件类型，就是你需要绑定的事件
[,eventData]:传递的参数，格式:(名:值,名2:值2)
handler(eventObject)该事件触发执行的函数
绑定单个事件
bind绑定
$(“元素”).bind(“onclick”,function(){ });
直接绑定
$(“元素”).事件名(function(){ });
绑定多个事件
bind绑定
1.多事件同一个函数
指定元素.bind(“事件 事件2 事件3”,function(){ })
2多事件并设置对应函数
指定元素.bind(“事件”,function(){ }).bind(“事件2”,function(){ });
3.多事件并设置对应函数
指定元素.bind({
"事件":function(){ },
"事件2":function(){ }
})
直接绑定
指定元素.事件名(function(){ }).事件名(function(){ });
后续缺
Ajax（在Ajax中统一整理）
JsAjax
JQAjax
标签：JQuery,function,元素,指定,笔记,学习,事件,选择器,属性 来源： https://www.cnblogs.com/laplaceLearnning/p/15937904.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。