家教网站怎么做,设计素材网站哪个最好推荐,大中型网站开发价格,施工企业春联一、JQ简介
jQuery是一个快速、简洁的JavaScript框架#xff0c;它封装了JavaScript常用的功能代码#xff0c;提供一种简便的JavaScript设计模式#xff0c;优化HTML文档操作、事件处理、动画设计和Ajax交互。
装载的先后次序#xff1a; jQuery封装库在上#xff0…一、JQ简介
jQuery是一个快速、简洁的JavaScript框架它封装了JavaScript常用的功能代码提供一种简便的JavaScript设计模式优化HTML文档操作、事件处理、动画设计和Ajax交互。
装载的先后次序 jQuery封装库在上Js代码在下。
二、JQ语法 1.页面加载完成之后 $(document).ready()function(){}; $(function(){});
2.选择器 JSdocument.getElementById(); JQ: $(选择器) id选择器$(“#id名称”); 元素选择器$(“元素名称”); 类选择器$(“.类名”);
3.操作内容 Js 表单 dom.value 非表单 dom.innerHTML Jq 表单 $.val() $.val(‘值’) 括号里是修改的值 参数是调用的值 非表单$.html() 括号里是修改的值
4.操作属性 JS: setAttribute getAttribute JQ:attr‘class’‘dd’ attr‘class’ 改多个变量时 $.attr({属性名属性值属性名属性值})
5.操作样式 Js dom.style Jq $.css(属性名属性值) 6.事件 Js dom.addElementL Dom.click function Jq $.click(function(){}) $(‘input:checked’) $(‘input[type”checkbox”]:checked’) $(‘input:checkbox:checked’)
7.循环遍历 $().each(function(){ each 是循环 $(this). })
Jq转dom对象 $(‘#dd’) 变为 $(‘#dd’)[0] 或$(‘#dd’).get(0)
Js 转 jq Var dom document.getElementBuId(); $(dom) 下面是JQ控制全选按钮 $(document).ready(function(){
//全选 $(#all).click(function(){ //当全选框选中时 if($(#all).prop(checked)){ //if($(#all:checked)){ 不能得到选中只得到 1 //循环给多选框选中 $(.more).each(function (){ $(this).prop(checked,true); }) }else{ //循环给多选框不选中 $(.more).each(function (){ $(this).prop(checked,false); }) } }); //多选 $(.more).click(function(){ //定义标志 var $flag true; //遍历多选框找到未选中的元素标志设为false $(.more).each(function (){ if($(this).prop(checked) false){ $flag false; return false; } }); //标志赋值给全选 $(#all).prop(checked,$flag); })
}); 下面是html代码 p classtitle考试三 表格复选框全选/p
tabletrthinput idall typecheckbox全选/thth姓名/thth性别/thth年龄/th/trtrtdinput classmore typecheckbox/tdtd张三/tdtd男/tdtd23/td/trtrtdinput classmore typecheckbox/tdtd李四/tdtd男/tdtd25/td/trtrtdinput classmore typecheckbox/tdtd王五/tdtd女/tdtd23/td/tr
/table View Code注意 prop‘checked’ 返回true false attr‘checked’ 返回checked
each的结束 在each代码块内不能使用break和continue,要实现break和continue的功能的话要使用其它的方式 break----用return false; continue --用return true; 更多专业前端知识请上
【猿2048】www.mk2048.com
