checkbox选中事件

jQuary 一、jquary对象和dom对象 jquary找到的标签对象成为-- jquary对象 原生js找到的标签对象成为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jquery对象的方法 jquery对象也是,它不能使用dom对象的方法 dom对象和jquery对象互相转换: jquery对象转dom对象 -- jquery对象[0] 示例:$('#d1')[0] dom对象转jquery对象 -- $(dom对象) 二、jquary选择器 1.基本选择器 选择器是使用 jQuery('#d1') -- $('#d1') #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容 id选择器 -- $("#id") 标签选择器 -- $("tagName") --> $('div') class选择器 -- $(".className") -->$('.c1') //里面直接放类值 配合使用 -- $('div.c1') //找到c1 class类的div标签 组合选择器 -- $("#id, .className, tagName") 总结： ​ 选择器可能找到的标签是多个，会放到数组里面

为何给CheckBox设置了checked属性还是没有勾选，行内样式都显示了checked 正常情况下我们设置给CheckBox一个checked属性后一般都会选中 然而我今天在做案例的时候却遇到了类似下面这样一种情况，如下图 可以看到已经给他设置了checkbox但是第一次加载的时候却没有显示勾选 看下代码： 当时的业务需求是每次点击时候要记录当前的状态以查看是否需要拿取数据 第一次加载时需取到数据 document.body.innerHTML = `<input type="checkbox" checked />` let input = document.querySelector('input'); input.onclick = function(){ input.checked = input.checked? false:true; } input.onclick(); 当时在创造元素的时候就给其设置了checked属性，设置第一次默认全都勾选的状态 由于第一次加载需要获取数据，当时就认为默认是没勾选的，所以调用了一次点击事件， 而且查看行内样式也是有checked样式，所以就会造成这种似乎设置了checked但是却没有选中的情况。 结语 并不是行内设置了checked样式就一定会勾选，还要看是否用给checked设置了真假属性。 来源： https://www

目录 jQuery介绍 优势： jQuery内容： jQuery对象 jQuery基本语法：$(selector).action() jQuery选择器 基本选择器 id选择器： $("#id") 标签选择器： $("tagName") class选择器： $(".className") 结合使用： $("div.c1") // 找到有c1 class类的div标签 所有元素选择器： $("*") 组合选择器： $("#id, .className, tagName") 层级选择器： 基本筛选器： 属性选择器： 表单筛选器： 筛选器方法 下一个元素： 上一个元素： 父亲元素： 儿子和兄弟元素： 查找 筛选 补充 操作标签 样式操作 样式类 CSS 位置操作 尺寸： 文本操作 属性操作 文档处理 添加到指定元素 内部 的后面 添加到指定元素 内部 的前面 添加到指定元素 外部 的后面 添加到指定元素 外部 的前面 移除和清空元素 替换 克隆 事件 常用事件 事件绑定 移除事件 阻止后续事件执行 阻止事件冒泡 页面载入 事件委托 动画效果 each .each(function(index, Element))： jQuery介绍 1、jQuery是一个轻量级的、兼容多浏览器的JavaScript类库。 2、jQuery使用户能够更方便地处理HTML Document、Events

目录 一、jQuery介绍 1.1jQuery的优势 1.2jQuery的内容： 1.3jQuery版本 二、jQuery对象 三、jQuery基础语法 3.1查找标签 3.1.1基本选择器 3.1.2 层级选择器： 3.1.3基本筛选器： 3.1.4属性选择器： 3.2单表筛选器 表单筛选器 ： 3.3筛选器方法 3.4操作标签 3.4.1样式操作 3.1.2位置操作 3.4.3文本操作 3.4.4属性操作 3.5文档处理 3.6事件 3.6.1常用事件 3.6.2绑定事件 3.6.3移除事件 3.6.4阻止后续事件执行 3.6.5阻止冒泡事件 3.6.6事件委托 3.7页面载入 3.7.1与window.onload的区别 一、jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 1.1jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了

目录 JQuery介绍 JQuery优势 JQuery版本 JQuery对象 声明JQuery对象的语法 JQuery基本的语法 JQuery把文件导入模板中 查找标签 基本选择器 层级选择器 筛选器 基本筛选器 属性筛选器 表单筛选器 操作标签 样式操作 文本操作 文档处理 属性操作 克隆 位置操作 事件 事件的绑定 input监听默认的事件 阻止事件冒泡 JQuery介绍 JQuery是一个轻量级、兼容多浏览器的js库，相当于python中的模块。 JQuery使用户能够更方便的处理HTML Document、Evnets（事件触发器）、实现动画效果、方便进行Ajax（创建快速动态页面的技术）、交互，能够极大的简化js编程。它的总是就是：写很少的代码，做更多的事情 JQuery优势 一款轻量级的js框架。JQuery核心js文件才几十kb，不会影响页面的加载速度。 丰富的DOM选择器，JQuery的选择器用来很方便，比如要找到某个DOM对象的相邻的元素，js也是一行代码就能搞定。 链式表达式。JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax（创建快速动态页面的技术）操作支持。JQuery简化了AJAX操作

1.第一种，!$(event.target).is('input'),判断触发事件的元素是否为input。此时使用event.target,而不是this，获取事件本身，防止触发事件冒泡的问题。 $("#data_table tr").on("click",function (event) { if (!$(event.target).is('input')) { $('input:checkbox', this).prop('checked', function (i, value) { return !value; }); } }) 注释：event.target属性的作用是获取到出发事件的元素。网上说使用event.target,在ie下可能会出现版本不兼容问题，我在ie11下进行测试，发现是可以的。所以应该是， jQuery对其封装后，避免了W3C、IE和safari浏览器不同标准的差异。若出现不兼容问题，可尝试使用如下方式。 var thisEvent = window.event || event; var targetEvent = thisEvent.srcElement; if (!targetEvent) { targetEvent = thisEvent.target; } 2.第二种，跳过checkbox所在列。本次示例是位于第一列

前端之Jquery jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

1.案例需求：点击登录按钮验证用户名和密码都不为空，为空就在对应的input标签下面显示一个错误的提示信息。 　　1.给登录的按钮绑定点击事件 　　2.点击事件要做的事情 　　　　1.找到input标签、取值、判断是否为空、length是否为0 　　　　2.如果不为空，则什么都不做 　　　　3.如果为空，要做几件事情 　　　　　　1.在当前这个input标签的下面，添加一个新的标签，内容为XX不能为空。 2.全选和反选 　　1.点击全选，表格中所有的checkbox都选中 　　　　1.找checkbox 　　　　2.全部选中 prop("checked",true) 　　2.点击取消 　　　　1.找checkbox 　　　　2.全部取消选中 prop("checked",false) 　　3.反选 　　　　1.找到所有的checkbox 　　　　2.判断 　　　　　　2.1原来没选中的，要选中 　　　　　　2.2原来选中的要取消选中 <table border="1"> <thread> <tr> <th>#</th> <th>姓名</th> <th>职位</th> </tr> </thread> <tbody> <tr> <td><input type="checkbox"></td> <td>小东北</td> <td>二人转演员</td> </tr> <tr> <td>

语法解释： 1 $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3 var checkValue=$("#select_id").val(); //获取Select选择的Value 4 var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5 var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery设置Select选择的Text和Value: 语法解释： 1 $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2 $("#select_id ").val(4); //设置Select的Value值为4的项选中 3 $("#select_id option[text='jQuery']").attr("selected", true); /

jQuery获取Select选择的Text和Value: 语法解释： 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery设置Select选择的Text和Value: 语法解释： 1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2. $("#select_id ").val(4); //设置Select的Value值为4的项选中 3. $("#select_id option[text='jQuery']").attr(