jQuery开始
jQuery对象是一个DOM数组对象,js中有DOM元素,jQuery是封装了DOM元素和对DOM元素的操作到一个数组中
选择器总结
需要获取所有同名元素
用元素选择器,$(“元素名”)
需要通过id获取元素
用id选择器,$(“#id名”)
需要通过类名获取元素
用类选择器,$(“.类名”)
需要通过多种方式获取元素
用组合选择器,$(“#id名,.类名,元素名”)
需要获取父元素下指定子孙元素
用派生选择器,$(“父元素名 子元素名”)
需要获取父元素下指定的子元素
用派生选择器,$(“父元素名>子元素名”)
需要获取指定元素的弟弟元素
用弟弟选择器,$(“指定元素 元素名”)
指定元素也是筛选条件,id选择器,
需要获取指定元素的所有弟弟元素
用弟弟选择器,$(“指定元素~元素名”)
获取指定元素下的指定元素名的所有弟弟元素
需要获取表格或类表的第几个元素(第几个tr,第几个td,第几个li)
1.获取该元素数组中第一个元素数组
用基本过滤选择器,$(“li:first”),表示从li元素数组中选取第一个li元素
2.获取元素数组中最后一个元素数组
用基本过滤选择器,$(“li:last”),表示从li元素数组中选取最后一个li元素
3.获取元素数组中下标等于n的元素数组
用基本过滤选择器,$(“li:eq(index)”),下标从0开始,eq为equal的缩写
4.获取元素数组中下标小于n的元素数组
用基本过滤选择器,$(“li:lt(index)”),下标从0开始,lt是less thin的缩写
5.获取元素数组中下标大于n的元素数组
用基本过滤选择器,$(“li:gt(index)”),下标从0开始,gt是greater thin的缩写
6.获取元素数组中下标为奇数的元素数组
用基本过滤选择器,$(“li:odd”),odd的意思是奇数的
7.获取元素数组中下标为偶数的元素数组
用基本过滤选择器,$(“li:even”),even意思为偶数的
8.获取元素数组中不是某个元素的其他所有元素的数组
用基本过滤选择器,$(“li:not(#id名或者.类名)”)
需要通过元素的内容来进行筛选获取所需的元素数组
用内容过滤选择器,$(“li:contains(‘文本内容’)”),
需要获取内容为空的元素的数组,即没有子元素也没有文本内容
用内容过滤选择器,$(“li:empty”)
需要获取指定元素数组中不可见的元素数组
用可见性过滤器,$(“li:hidden”),
隐藏元素有两种,一种是表单控件的类型为隐藏,还有一种是css样式显示为一个都没有(display:none)
需要获取元素数组中可见的元素的数组
用可见性过滤选择器,$(“li:visible”)
需要获取元素数组中有id属性或者class属性或者name属性或者value属性等等的元素数组
用属性过滤选择器,$(“li:[id或者class或者name或者value等等]”)
需要获取元素数组中有id属性并且id值为gz的元素数组
用属性过滤选择器,$(“li:[id=’gz’]”)
需要获取元素数组中id不为gz的其他元素的数组
用属性过滤选择器,$(“li:[id!=’gz’]”)
过滤器是建立在基本选择器和层次选择器之上的
需要获取表单控件中的可用的元素的数组
通过状态过滤选择器,$(“input:enabled”)
需要获取表单控件中的不可用的元素的数组
通过状态过滤选择器,$(“input:disabled”),
在表单控件元素中加入disabled属性,该元素的value值不能被修改,并且在提交时,不会将该表单控件中的value值提交给服务器
在表单控件元素中加入readonly属性,该元素的value值不能被修改,在提交的时候,会将该表单控件的value值提交给服务器
需要获取单选框和复选框中默认选中的元素的数组
通过状态过滤选择器,$(“input:checked”)
如果获取被选中的单选框的value值
通过jquery的表单控件选择器选择radio元素
通过过滤器获取被选中的radio元素
调用jquery的val()来获取元素的value值
var val = $(“:radio:checked”).val();
需要获取下拉选的默认选中的元素的数组
通过状态过滤选择器,$(“option:selected”)
下拉选:
如何获取下拉选中被选中的元素的value
$(“#selectEle”).find(“option:selected”).val();
下拉选:
如何设置下拉选为指定选项
$(obj2).find(“option[value=’1′]”).prop(“selected”,true);
需要获取表单中的指定类型的表单控件元素数组
通过表单选择器,通过类型的值进行选择
1.获取文本框元素数组,$(“:text”)
2.获取密码框元素数组,$(“:password”)
3.获取单选框元素数组,$(“:
“)
4.获取复选框元素数组,$(“:checkbox”)
5.获取提交按钮元素数组,$(“:submit”)
6.获取重置按钮元素数组,$(“:reset”)
7.获取普通按钮元素数组,$(“:button”)
8.获取选择文件元素数组,$(“:file”)
9.获取隐藏元素数组,$(“:hidden”)
jQuery
API
如何使用jquery通过ajax对象向web服务器发送请求,如何处理web服务器返回结果的
调用ajax函数,
如何通过jquery获取ajax对象
调用jquery的内置函数,获取json方法getJSON,输入两个参数,路径url和向web服务器发送的数据data,
一个匿名函数function(){},该函数就是成功的回调函数,可以向参数中添加变量,jquery会将json字符串
转换成json对象赋值给该变量,可以在外面先定义路径变量url和数据变量data,data是json对象
什么时候用get请求,,什么时候用post请求
当有请求参数时,用post请求,将数据写到data中,当没有请求参数时,用get请求
如何使用jquery创建元素
$(“<option>邢台</option>”);
如何用jquery将子元素追加到父元素上
1.创建元素$(“<tr><td></td></tr>”)
2.通过jquery获取父元素对象
3.调用父元素的附加方法append(),将子元素输入
如何用jquery将web服务器发送来的数据附加到父元素上
尽量不修改原html中的内容
1.通过变量声明需要附加的子元素的字符串形式,将需要替换的内容用中括号包围
2.调用字符串的替换方法replace(‘旧字符串’,’新字符串’),替换中括号字符串为数据
3.通过jquery获取父元素对象,调用附加方法append(‘元素的字符串形式’),将替换好的字符串输入到参数列表中
jquery的附加方法append(),可以输入哪些类型的参数
1.可以输入jquery创建的元素对象
2.可以输入元素的字符串形式
3.可以输入js创建的元素对象
4.在v1.4版本中可以输入函数,有两个参数,下标和html
需要读写元素数组的内容(这里的标签有效)
调用元素数组的html()方法,表示获取内容,返回一个字符串对象
调用元素数组的html(“内容”)方法,表示修改内容,还是该元素对象
需要读写元素数组的文本内容(这里的标签视为字符串,没有效果)
调用元素数组的text()方法,表示获取文本内容,返回一个字符串对象
调用元素数组的text(“内容”)方法,表示修改文本内容,还是该元素对象
需要读写元素数组的属性
调用元素数组的attr(“属性名”)方法,表示获取该属性值,返回字符串对象
调用元素数组的attr(“属性名”,”属性值”)方法,表示创建或修改该属性值,还是该元素对象
需要读写元素数组的value值
调用元素数组的val()方法,表示获取value值,返回字符串对象
调用元素数组的val(“内容”)方法,表示修改value值,还是该元素对象
如何通过jquery给元素绑定数据
1.通过jquery选择元素
2.调用数据方法data(key,value)
如何通过jquery获取元素绑定的数据
1.通过jquery选择元素
2.调用数据方法data(key),返回value值
如何使用jquery获取子元素
1.通过jquery选择器选择父元素
2.调用寻找方法find(String str),返回匹配的子元素
如何使用jquery获取父元素
1.通过jquery选择器获取子元素
2.调用父方法parent(),返回父元素对象
如何使用jquery获取指定的父元素
1.通过jquery选择器选择子元素
2.调用父方法parent(‘jquery选择器’)
如果有匹配的父元素,则会返回该父元素的jquery对象
如果没有匹配的父元素,则会返会一个空jquery对象[]
如何使用jquery添加class属性
1.通过jquery选择器获取该元素
2.通过添加类方法addClass(‘属性值’)
如何使用jquery删除class属性
1.通过jquery选择器获取元素
2.调用移除类方法removeClass(‘属性值’)
如何使用jquery将数据绑定到元素上
1.通过jquery选择器获取元素
2.调用数据方法data(‘属性名’,数据对象),
如何使用jquery获取元素上绑定的数据
1.通过jquery选择器获取该元素
2.调用数据方法data(‘属性名’)返回数据对象
1.通过jquery选择器获取该元素
2.调用属性方法attr(‘属性名’,’属性值’)添加失效属性disable,属性值也是disable
如何设置定时器,设置限定时间后执行该部分内容,而不影响其他部分执行
通过js内置函数设置超时setTimeout(function(){代码片段},时间间隔);
如何在元素内添加子元素,将该子元素添加到内部元素之前
1.通过jquery选择器选取父元素
2.调用预先考虑方法prepend(子元素的字符串形式或者jquery元素或者DOM元素)
如何使用jquery将外部的html文件插入到本html中元素的标签体内
1.用jquery选择器获取该元素
2.调用加载方法load(‘外部html文件路径’,function(){可以对导入的元素进行操作});
如何通过jquery将元素删除
1.通过jquery选择器获取该元素
2.调用移除方法remove()
如何使用jquery将元素的标签体清空
1.通过jquery选择器获取该元素
2.调用清空方法empty()
如何获取jquery数组对象中的第n个jquery元素对象
调用jquery的等于方法eq(index)
$(‘p’).eq(index),下标从0开始
如何使用jquery找到弟弟元素
1.通过jquery选择器获取该元素
2.调用下一个方法next(),返回该元素的弟弟元素
如何使用jquery找到指定的弟弟元素
1.通过jquery选择器获取该元素
2.调用下一个方法next(‘jquery选择器’)
如果该元素的弟弟元素存在并且满足选择器要求,则返回该弟弟元素,否则返回空jquery数组对象
如何使用jquery找到哥哥元素
1.通过jquery选择器获取该元素
2.调用前一个方法pre(),
如何哥哥元素存在则返回该元素的哥哥元素,否则返回空数组对象
如何使用jquery找到指定哥哥元素
1.通过jquery选择器获取该元素
2.调用前一个方法pre(‘jquery选择器’)
如果哥哥元素存在并且满足选择器的要求,则返回该哥哥元素,否则返回空jquery数组对象
如何使用jquery动态的修改style
1.通过jquery选择器获取该元素
2.调用css(‘color’,’red’)方法
如何通过jquery冬天显示隐藏元素
1.通过jquery选择器获取该元素
2.调用
$(“元素选择器”).show()
$(“元素选择器”).hide()
$(“元素选择器”).attr(‘style’,’display:none’)
$(“元素选择器”).attr(‘style’,’display:block’)
$(“元素选择器”).css(‘display’,’none’)
$(“元素选择器”).css(‘display’,’block’)
*
*
jQuery
jQuery事件
需要在网页加载完成后给元素绑定事件
在$(function(){在这里写需要绑定的操作});
需要给某元素绑定事件
先用选择器选定该元素的jq对象,调用该对象的事件方法
需要在打开网页后,程序自行触发某事件
需要写到自行加载js中,需要一次性定时器,在定时器中(setTimeout(function(){})),
需要获取该元素的jq对象,调用该对象的触发方法trigger(),参数中加入需要触发的事件的字符串形式
需要解除绑定事件
需要先通过选择器获取该元素的jq对象,调用该对象的解绑方法unblind(“事件名”)
关闭冒泡事件的方法
1.先用选择器获取该元素的jq对象,调用该对象的停止传播的方法stopPropagation();
2.也可以返回false,则会阻止事件继续传播,return false;
通过事件对象获取事件源
调用事件源的目标属性,target
需要设置鼠标悬停和鼠标离开的事件
调用jq对象的悬停方法,hover(function(){},function(){})
需要设置鼠标悬停的事件
获取该元素的jq对象,给该元素绑定鼠标在上方事件,mouseover
需要
需要设置一个元素在隐藏和显示之间切换的事件
绑定事件,在触发的函数中,调用jq对象的切换方法,toggle()
需要设置一个元素缓慢的隐藏和缓慢的显示的事件
调用jq对象的切换方法
jq对象绑定事件的方法有两种
一种是调用该对象的绑定方法,在参数中写入匿名函数,
另一种是直接以事件为方法名,在参数中写入匿名函数
现在用第二种简写方法,下面的调用的方法都是jq对象的方法
需要对那个元素绑定事件,那个元素的jq对象调用方法
需要解除绑定事件
调用不绑定的方法,unblink(“事件名”)
需要绑定单击事件
调用单击方法,click(匿名函数);
需要绑定双击事件
调用双击方法,dbclick(匿名函数);
需要绑定失去焦点事件
调用失去焦点方法,blur(匿名函数);
需要绑定聚焦事件
调用聚焦方法,focus(匿名函数);
需要绑定自动触发事件
调用触发方法,triggle(“事件名”);
需要通过jquery触发某元素绑定的单击事件
通过jquery选择器选择元素,调用单击方法click(),即可触发该元素绑定的单击事件
需要绑定悬停和离开事件
调用悬停方法,hover(匿名函数(悬停时调用),匿名函数(离开时调用));
需要绑定鼠标悬停事件
调用鼠标在上方方法,mouseover(匿名函数);
需要绑定错误事件
调用错误方法,error(匿名函数);
需要通过jquery的方法,将光标聚焦到某个表单控件上
通过jquery选择器选择该表单控件元素,调用聚焦方法focus()即可
需要在服务器端记录javaScript错误日志
需要给浏览器绑定错误事件,$(window).error(匿名函数),看jQuery API,暂时没用过
需要隐藏javaScript错误
需要给浏览器绑定错误事件,$(window).error(匿名函数)
需要设置显示和隐藏元素
获取DOM数组,调用该数组的开关方法,toggle();先判断是否隐藏,如果为显示状态,会转变为隐藏,
如果是隐藏状态,会变为显示状态
*
绑定事件有多种方法:
有两种方法:
1.在元素上直接声明事件
2.在脚本标签中用后绑定事件方法
在后绑定事件中有两种方法
1.用js绑定事件
2.用jq绑定事件
用js绑定事件有两种方法
需要在window.onload=function(){};中写,在页面加载完成之后自动运行该内容
需要先获取元素,获取元素有四种方法,
1.调用元素的setAttribute(“事件名”,匿名函数);
2.调用元素的属性,元素.onclick=function(){};
用jquery绑定事件有两种方法
需要在$(function(){});中写,在页面加载后自动运行该内容
需要获取DOM数组,有两种方法
1.调用DOM数组的绑定方法,bind(“事件名(不用写on)”,function(){});
2.调用DOM数组的事件方法,有很多种,比如:DOM数组.click(function(){});
获取元素的方法
1.通过id获取元素,getElementById(“id名”);
2.通过name值获取元素数组,在通过数组下标获取指定元素,getElementsByName(“name值”);
3.通过目标元素名称获取元素数组,在通过数组下标获取指定元素数组,getElementsByTagName(“元素名”);
4.通过子元素获取父元素,parentNode;
获取DOM数组有两种方法
1.通过选择器获取
2.将DOM元素加入到DOM数组中
jquery的事件方法有36种
当网页加载完成后自动执行的函数,有三种方法
1.调用DOM数组的准备方法,$(document).ready(function(){});
2.简写方法,$(function(){});
3.用js的window.onload=function(){};
需要通过事件冒泡机制,给父元素绑定事件,触发事件时,获取指定子元素,并执行函数,通过on方法来绑定事件
1.调用jquery获取元素,
2.调用on方法,输入三个参数,事件类型(如单击事件click),子元素(通过选择器选择子元素),函数,触发事件
时执行的函数
3.在函数中,通过this来获取当前DOM元素
$(ul).on(‘click’,’li’,function(){ var li=$(this); });
什么时候用事件冒泡来绑定事件
给列表元素绑定事件时用
如何给为出现的子元素绑定事件
1.可以用事件冒泡,给父元素绑定事件来监听子元素的事件
2.可以在加载完子元素后,获取子元素后绑定事件
如何用事件冒泡,给父元素绑定事件来监听子元素的事件
1.通过jquery选择器获取父元素
2.调用on方法绑定事件
$(‘选择器’).on(‘事件类型’,’监听子元素’,function(){});
监听子元素也是元素选择器,是从父元素派生选择的子元素
如何设置一个元素为隐藏状态
1.通过jquery选择器获取该元素
2.调用隐藏方法hide()
如何设置一个元素为显示状态
1.通过jquery选择器获取该元素
2.调用显示方法show()
使用jquery,如果实现展开和关闭效果
绑定单击事件
通过jquery选择器选择该元素
调用jquery的滑动切换函数slideToggle(“毫秒/slow/normal/fast”,回调函数);
回调函数可写可不写,切换完成后执行回调函数
如何使用jquery给整个页面绑定事件
1.将document元素转为jquery元素
2.调用绑定事件方法
$(document).click(function(){});
如何使用jquery,如何实现复选框的全选功能
给全选的复选框绑定单击事件onclick,添加id,
先判断选中的复选框为选中状态还是未选中状态
如果是选中状态,则通过jqeury将所有的复选框的状态改为选中状态
如果是未选中状态,则通过jqeury将所有的复选框的状态改为未选中状态
全选<input type=”checkbox” id=”isAllChose” onchange=”isAllChose”/><script> function isAllChose(){ if($(“#isAllChose”).is(“:checked”)){//选中状态时返回true,未选中状态时返回false //将所有的复选框改为选中状态 $(“input[type=checkbox]”).prop(“checked”,true);//用prop方法,如果用attr方法,则在页面上有时会显示不出来 }else{ $(“input[type=checkbox]”).prop(“checked”,false); } }</script>
如何获取多个复选框的value值
<input type=”checkbox” class=”sysPermission” value=”1″> <input type=”checkbox” class=”sysPermission” value=”2″> <input type=”checkbox” class=”sysPermission” value=”3″> var sysPermission = “”; var index = 0; $(“.sysPermission:checked”).each(function(){ var thisNode = $(this); if (index == 0) { sysPermission = thisNode.val(); } else { sysPermission = “,” thisNode.val(); } index ; }); if (!sysPermission) { alertError(“访问系统：没有值，请输入或选择值”); return; }
在jquery中如何获取所有的复选框元素
用jquery的元素选择器
$(“input[type=checkbox]”)
在jquery中如何改变复选框的选中状态
用jquery元素选择器选中该元素
调用prop函数修改checked属性为true/false
$(“复选框元素”).prop(“checked”,true/false);
如何使页面弹出朦胧层
用jquery的遮罩方法
引入jquery.blockui.min.js
调用$.blockUI({message:”请稍等…”});方法弹出朦胧层
调用$.unblockUI();方法关闭朦胧层
$.post()和$.get()请求如何改成同步请求
默认为异步请求
在请求前面加上:
$.ajaxSettings.async = false;//改为同步请求 $.ajaxSettings.async = true;//改回异步请求
select下拉选:如何清空下拉选的选项
通过jquery封装的empty()方法,通过jquery获取该元素,然后调用empty()方法
如何通过ajax来解决前端调用其他后台服务产生的跨域问题
前端报错:Cross-Origin Read Blocking (CORB) blocked cross-origin response 用jsonp调用 $.ajax({ url: ‘http://127.0.0.1:8083/legalback/userConfig/pushUserToLegalManage?callback=?’, //下面jsonpCallback会作为callback的参数 dataType: ‘jsonp’, jsonpCallback: ‘JSONP’,//回调名称需要和调用接口的回调方法名称一致 success: function(data) { console.log(“getTydlptUser”,data); } });
调用接口,返回的json字符串,需要拼接成:JSONP({参数名:参数值})的形式,这里的JSONP和上面的jsonpCallback保持一致
@CrossOrigin//用来声明可以被跨域调用,不添加这个注释也可以实现跨域调用 @GetMapping(“/pushUserToLegalManage”)//用jsonp来实现跨域,只能调用get请求 @ApiOperation(notes=”同步信用单点用户”, value = “pushUserToLegalManage”) public Object pushUserToLegalManage(HttpServletRequest request){ ResultEntity resultEntity= taiUserService.getTydlptUser(); String json = GsonUtils.toJson(resultEntity); return “JSONP(” json “)”; }
如果还是实现不了跨域调用,可以在过滤器中添加reponse的header,来试试
response.setHeader(“Access-Control-Allow-Origin”, “*”);response.setHeader(“Access-Control-Allow-Headers”,”Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token”);
或者在方法上添加@CrossOrigin,来试试
ajax如何添加header
$.ajax({ url: ‘http://192.168.1.114:8080/shzzfrk/frkjk/yhtbjk/pushUserToDongruan’, //不指定回调名，可省略callback参数，会由jQuery自动生成 headers: { Referer:”http://192.168.1.114:8080″, Origin:”http://192.168.1.114:8080″ }, dataType: ‘jsonp’, jsonpCallback: ‘JSONP’, success: function(data) { console.log(“pushUserToDongruan”,data); } });
