千助网站建设,网站整站程序,wordpress改站点标题,wordpress安装包JQuery 优点 : #xff08;1#xff09;提供了强大的功能函数 #xff08;2#xff09;解决浏览器兼容性问题 #xff08;3#xff09;实现丰富的 UI 和插件 #xff08;4#xff09;纠正错误的脚本知识…
1、Jquery对象 $ 符号在 jQuery 中代表对 jQuery 对象的引用,…JQuery 优点 : 1提供了强大的功能函数 2解决浏览器兼容性问题 3实现丰富的 UI 和插件 4纠正错误的脚本知识…
1、Jquery对象 $ 符号在 jQuery 中代表对 jQuery 对象的引用, jQuery是核心对 象。
通过该对象可以获取jQuery对象调用jQuery提供的方法等。
只有jQuery对象才能调用jQuery提供的方法。 $ jQuery 1 Jquery的使用 在页面引入即可
Dom对象与Jquery包装集对象 Dom对象 javascript 中获取 Dom 对象Dom 对象只有有限的属性和方法var div document.getElementById(“testDiv”); var divs document.getElementsByTagName(“div”);
Jquery包装集对象 可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元 素的 jQuery 包装集 var jQueryObject $(“#testDiv”);
Dom对象 转 Jquery对象 Dom对象转为jQuery对象只需要利用$()方法进行包装即可 var domDiv document.getElementById(‘mydiv’); // 获取Dom对象 mydiv $(domDiv);
Jquery对象 转 Dom对象 jQuery对象转Dom对象只需要取数组中的元素即可 : // 第一种方式 获取jQuery对象 var jqueryDiv jQuery(‘#mydiv’); // 第二种方式 获取jQuery对象 jqueryDiv $(‘#mydiv’); var dom jqueryDiv[0]; // 将以获取的jquery对象转为dom
通过遍历jQuery对象数组得到的对象是Dom对象可以通过$()转为jQuery对象 : $(‘#mydiv’).each(function() {//遍历 var jquery $(this); });
原始的Dom对象只有DOM接口提供的方法和属性通过js代码获取的对象都是dom对象 而通过jQuery获取的对象是jQuery包装集对象简称jQuery对象只有jQuery对象才能使用jQuery提供而的方法。 2、Jquery选择器 jQuery中提供的简便的方式供我们查找|定位元素。
基础选择器 id选择器 #id
$(“#testDiv”)选择id为testDiv的元素 元素名称选择器 element
$(“div”)选择所有div元素 类选择器 .class
$(“.blue”)选择所有classblue的元素 选择所有元素 *
$(“*”)选择页面所有元素 组合选择器 selector1,selector2,selectorN
$(“#testDiv,span,.blue”)同时选中多个选择器匹配的元素 层次选择器 表单选择器 3、Jquery Dom操作 提供对HTML节点的操作优化原生js 注意以下的操作方式只适用于jQuery对象。
操作元素的属性 1.attr() 设置或者返回元素的属性 ; 2.prop() 设置 具有 true 和 false 两个属性的属性 如 checked, selected 或者 disabled。 百 度 新 浪 全选 console.log($(‘:checkbox’).attr(‘checked’)); // 获取属性值prop // 若未选中显示false选中显示 true
console.log(( : c h e c k b o x ) . p r o p ( ′ c h e c k e d ′ ) ) ; c o n s o l e . l o g ( (:checkbox).prop(checked)); console.log((:checkbox).prop( ′ checked ′ ));console.log((‘#a2’).prop(‘href’)) // 设置属性值
$(‘#a1’).attr(‘href’,‘https://jquery.com’); $(“:checkbox”).prop(“checked”,false); // 移除属性 $(‘#a2’).removeAttr(‘href’); 获取属性
aa bb attr属性名称
获取指定的属性值操作checkbox 时 选中返回 checked没有选中返回 undefined。
attr(‘checked’) attr(‘name’) prop属性名称
获取具有true和false两个属性的属性值
prop(‘checked’) 设置属性
attr(属性名称属性值)
设置指定的属性值操作 checkbox时 选中返回checked没有选中返回undefined。
attr(‘checked’,’checked’) attr(‘name’,’zs’) prop(属性名称属性值)
设置具有true和false的属性值
prop(‘checked’,’true’) 移除属性
removeAttr(属性名)
移除指定的属性
removeAttr(‘checked’) 操作元素的样式 attr(“class”)
获取class属性的值即样式名称 attr(“class”,“样式名”)
修改class属性的值修改样式 addClass(“样式名”)
添加样式名称 css( )
添加具体的样式 removeClass(class)
移除样式名称 操作元素的内容 html( )
获取元素的html内容 html(“html,内容”)
设定元素的html内容 text( )
获取元素的文本内容不包含html text(“text,内容”)
设置元素的文本内容不包含html val( )
获取元素value值 val(‘值’)
设定元素的value值 创建元素 在jQuery中创建元素很简单直接使用核心函数即可$
$(‘元素内容’); $(‘
this is a paragraph!!!
’); 添加元素 prepend(content)
在被选元素内部的开头插入元素或内容被追加的 content参数可是字符、HTML 元素标记。 $(content).prependTo(selector)
把content元素或内容加入selector元素开头 append(content)
在被选元素内部的结尾插入元素或内容被追加的 content参数可是字符、HTML 元素标记。 $(content).appendTo(selector)
把 content元素或内容插入selector 元素内默认是在尾部。 before()
在元素前插入指定的元素或内容: $(selector).before(content) after()
在元素前插入指定的元素或内容: $(selector).after(content) 删除元素 remove( )删除所选元素或指定的子元素包括整个标签和内容一起删。 empty( )清空所选元素的内容 遍历元素each( )
$(selector).each(function(index,element)) :遍历元素 参数 function 为遍历时的回调函数 index 为遍历元素的序列号从 0 开始。 element是当前的元素此时是dom元素。4、Jquery事件 ready加载事件 ready()类似于 onLoad()事件 ready()可以写多个按顺序执行 bind绑定事件 为被选元素添加一个或多个事件处理程序并规定事件发生时运行的函数。 $(selector).bind( eventType [, eventData], handler(eventObject));
eventType 是一个字符串类型的事件类型就是你所需要绑定的事件。 这类类型可以包括如下: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter mouseleave,change, select, submit, keydown, keypress, keyup, error
[, eventData]传递的参数格式{名:值,名2:值2} handler(eventObject)该事件触发执行的函数
简单的bind( )事件
bind()方法绑多个事件 点击查看 名言 5、Jquery Ajax $.ajax() 格式$.ajax({}) 参数缩
type请求方式GET/POST url请求地址url async是否异步默认是true表示异步 data发送到服务器的数据 dataType预期服务器返回的数据类型 contentType设置请求头 success请求成功时调用此函数 error请求失败时调用此函数 get请求: $.ajax({ type:“get”, url:“js/cuisine_area.json”, async:true, success : function (msg) { var str msg; console.log(str); $(‘div’).append(“
”); for(var i0; imsg.prices.length;i){ $(‘ul’).append(“ ”); $(‘li’).eq(i).text(msg.prices[i]); } }, error : function (errMsg) { console.log(errMsg); $(‘div’).html(errMsg.responseText); } }); post请求 $.ajax({ type:“post”, data:“nametom”, url:“js/cuisine_area.json”, contentType: “application/x-www-form urlencoded”, async:true, success : function (msg) { var str msg; console.log(str); $(‘div’).append(“
”); for(var i0; imsg.prices.length;i){ $(‘ul’).append(“ ”); $(‘li’).eq(i).text(msg.prices[i]); } }, error : function (errMsg) { console.log(errMsg); $(‘div’).html(errMsg.responseText) } }); $.get() // 1.请求json文件忽略返回值 $.get(‘js/cuisine_area.json’);
// 2.请求json文件传递参数忽略返回值 $.get(‘js/cuisine_area.json’, {name:“tom”,age:100});
// 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.get(‘js/cuisine_area.json’,function(data){ console.log(data); });
// 4.请求json文件,传递参数,拿到返回值 $.get(‘js/cuisine_area.json’, {name:“tom”,age:100},function(data){ console.log(data); });
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。 请求成功时可调用回调函数。如果需要在出错时执行函数请使用$.ajax $.post() // 1.请求json文件忽略返回值 $.post(‘…/js/cuisine_area.json’);
// 2.请求json文件传递参数忽略返回值 $.post(‘js/cuisine_area.json’, {name:“tom”,age:100});
// 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.post(‘js/cuisine_area.json’,function(data){ console.log(data); });
// 4.请求json文件,传递参数,拿到返回值 $.post(‘js/cuisine_area.json’, {name:“tom”,age:100},function(data){ console.log(data); });
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。 请求成功时可调用回调函数。如果需要在出错时执行函数请使用$.ajax。 $.getJSON() $.getJSON(‘js/cuisine_area.json’, {name:“tom”,age:100},function(data){ console.log(data); // 要求返回的数据格式是JSON格式 });
表示请求返回数据类型是JSON格式的ajax请求 重点 1、JQuery对象 2、JQuery基本选择器(ID、元素、class)、表单选择器 3、JQuery 操作DOM(元素创建、添加、遍历、更新、删除) 4、JQuery 常用事件绑定(click、focus、blur) 5、Jquery Ajax完成Get、Post请求发送
