标签：jQuery checked 标签 data fn 属性
1，基础
1.为什么要用jquery？
写起来简单，省事，开发效率高，兼容性好
2、什么是jQuery?
jQuery是一个兼容多浏览器的JavaScript库（类似python里面的模块）
3、如何使用jQuery？
1、导入 <script src="jquery-3.2.1.js"></script>
或者<script src="jquery-3.2.1.min.js"></script>
2、语法规则：$("")
4、JS和jQuery的区别？
jQuery就是用JS写的
js是基础，jQuery是工具
5、jQuery介绍
- 版本
- 1.x
兼容IE8。。。
- 3.x
最新
- .min.xx
压缩的：生产环境用
- 没有压缩的（没有.min.xx）：开发用
6、 jQuery知识点
html:裸体的人
css:穿了衣服的人
JS：让人动起来
7、选择器：
1、基本选择器
- ID选择器 $("#id的值")
- 类选择器（class） $(".class的值")
- 标签选择器(html标签) $("标签的名字")
- 所有标签 $("*")
- 组合选择器 $("xx,xxx")
2、层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙")
- 从一个标签的儿子里面找 $("父亲>儿子标签")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签")
- 找后面所有同级的 $("标签~兄弟")
8、jQuery对象：
- 用jQuery选择器查出来的就是jQuery对象
- jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法
- DOM对象和jQuery对象转换：
- $(".c1")[0] --> DOM对象
- $(DOM对象)2，筛选器
1，写在引号里面的
基本筛选器 $(" :first") 找第一个 $(" :not('')") 不是/非 $("#i1>input":not('.c1,.c2')) $(" :even") 偶数 $(" :odd") 奇数 $(" :eq(index)") 找等于index的 $(" :gt(index)") 找大于index的 $(" :lt(index)") 找小于index的 $(" :last") 最后一个 $(" :focus") 焦点 内容========== $(" .c1:contains('我是第一个')") 包含文档的内容的标签 $(" :empty") 标签内容为空的 $(" :has('')") 包含标签的标签 $(" :parent") 找有孩子的父亲 $("#i7").parent() 找i7的父亲 可见性======== $(" :hidden") 找到隐藏的 $(" :visible") 找不隐藏的，也就是显示的 属性========== input[name] --> 找有name属性的input input[type='password'] -->类型是password的input标签 表单========== :input :password :checkbox :radio :submit :button :image :file 表单对象属性========= :enable 可选的 :disable 不可选 :checked 选中的 :selected 下拉框选中
2，写在信号外面当方法用的
过滤=========== $("").first() 找第一个 $("").parent() 找父亲 $("").eq(index) 找等于index的 .hasClass() 判断有没有某个类的 查找========== .children() 找孩子 .find() 查找 .next() 下面的 .nextAll() 下面所有的 .nextUntil() 找下面的直到找到某个标签为止 .parent() 找父亲 .parents() 找所有的父亲 .parentsUntil() 直到找到你要找的那个父亲为止 .prev() 上面的 .prevAll() 上面的所有 .prevUntil() 上面的直到找到某个标签为止 .siblings() 所有的兄弟 三个方法======= .toggleClass() #切换|开关：有就移除，没有就添加 .addClass() #添加类 .removeClass() #删除类
3，需要注意的几个筛选器
$('.c1').first() $('.c1:first') 这两个是一样的， $('.c1').parent() #找父亲 $('.c1:parent') #找有孩子的父亲 $('.c2').html() #获取HTML代码
3，属性
属性（如果你的选择器选出了多个对象，那么默认只会返回出第一个属性）、 attr(属性名|属性值) - 一个参数是获取属性的值，两个参数是设置属性值 - 点击加载图片示例 removeAttr(属性名) -删除属性的值 prop(属性名|属性值) - 属性的返回值的是布尔类型 - 单选，反选，取消的例子 removeProp(属性名) prop和attr方法的区别: 总结一下： 1.对于标签上有的能看到的属性和自定义属性都用attr 2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr() checked示例: attr(): 查看值,checked 选中--'checked' 没选中--undefined $('#nv').attr({'checked':'checked'}); 设置值,attr无法完成取消选中 $('#nv').attr({'checked':'undefined'}); $('#nv').attr({'checked':undefined}); prop(): 查看值,checked 选中--true 没选中--false $(':checkbox').prop('checked'); 设置值: $(':checkbox').prop('checked',true); $(':checkbox').prop('checked',false);
4，文档操作
1，文档操作
文档操作
姿势1:添加到指定元素内部的后面 $(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B append示例: 方式1: 创建标签 var a = document.createElement('a'); $(a).text('百度'); $(a).attr('href','http://www.baidu.com'); $('#d1').append(a); 方式2:(重点) $('#d1').append('<a href="xx">京东</a>'); appendto示例 $(a).appendTo('#d1'); 姿势2:添加到指定元素内部的前面 $(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B 姿势3:添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 姿势4: $(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面 移除和清空元素 remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在 示例: $('#d1').remove(); $('#d1').empty(); 替换: replaceWith() replaceAll() 示例: $('#d1').replaceWith(a); 用a替换前面的标签 $(a).replaceAll('#d1');
2，CSS
.css() - .css("color") -> 获取color css值 - .css("color", "#ff0000") -> 设置值 - .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值 - .css(["color", "border"]) -> 获取多个值 .offset - 获取相对位置 - 比较的对象是html (窗口) .position - 获取相对已经定位的父标签的位置 - 比较的是最近的那个做过定位的祖先标签 .scrollTop([val]) - 返回顶部的例子 .scrollLeft([val]) 尺寸： height([val|fn]) - 元素的高度 width([val|fn]) - 元素的宽度 innerHeight() - 带padding的高度 innerWidth() - 带padding的宽度 outerHeight([soptions]) - 在innerHeight的基础上再加border的高度 outerWidth([options]) - 在innerHeight的基础上再加border的高度
3，动画
基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) - 淡出到0.66透明度 fadeToggle([s,[e],[fn]]) - .fadeToggle(3000, function () { alert("真没用3"); }); 自定义 animate(p,[s],[e],[fn])1.8* - css属性值都可以设置 - 图片变小（漏气）
5，事件处理
1，绑定事件的方式
之前绑定事件的方式： 1. onclick=clickMe(); function clickMe() {} 2. ele.onclick = function(){} 3. ele.addEventListener("click", function(){}) js事件委派 jQuery绑定事件的方式： 1. $(ele).on("click", function(){}) 2. $("tbody").delegate(".btn-warning", "click", function(){}) 这个3.几的版本没有这个方法了，这是3.几以前版本有的方法 3. $("tbody").on("click",".btn-warning",function(){}) jQuery的事件委派
2，常用事件
blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点（ 搜索框例子） change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子) click([[data],fn]) 点击 dblclick([[data],fn]) 双击 scroll([[data],fn]) 滚动 submit([[data],fn]) 提交
3，不常用事件
error([[data],fn]) focusin([data],fn) focusout([data],fn) keydown([[data],fn]) 按下 keypress([[data],fn]) 按键 keyup([[data],fn]) 键松开 mousedown([[data],fn]) 鼠标按下 mouseenter([[data],fn]) 鼠标移进去 mouseleave([[data],fn]) 鼠标离开：只有鼠标离开被选元素的时候，才会触发mouseleave事件 mousemove([[data],fn]) 鼠标移动 mouseout([[data],fn]) 鼠标离开：无论鼠标离开被选元素还是任何子元素，都会触发mouseout事件 mouseover([[data],fn] 鼠标悬停 mouseup([[data],fn]) 鼠标弹起 resize([[data],fn]) 元素窗口发生变化 select([[data],fn]) unload([[data],fn])
标签：jQuery,checked,标签,data,fn,属性 来源： https://www.cnblogs.com/daviddd/p/12048371.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。