JQuery:
JQuery语法格式：
JQuery文档就绪函数：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--导入JQuery文件--> <script src="../../text/JQuery/jquery-3.1.1.min.js"> //内部不允许有其他东西 </script> <script> //文档就绪函数 //第一种：复杂版 $(document).ready(function(){ //隐藏元素 $('p').hide(); }) //第二种：简化版 $(function(){ //隐藏元素 $('p').hide(); }) </script> </head> <body> <p>重力小丑</p> </body> <!--两个script必须分开写，如果连着写就要加入文档就绪函数--> </html>
DOM操作：操作css,操作元素属性，设置元素及内容
操作css:
通过JQuery修改css样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过JQery修改css样式</title> <script src="../JQuery/jquery-3.1.1.min.js"></script> <script> $(function(){
//修改单个css样式 $('div').css('background-color','red');效果如图;
//修改多个css样式$('div').css({'background-color':'red','font-size':'large'});
效果如图:
}) </script> </head> <body> <div> 123456 </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入jquery--> <style type="text/css"> div{ height: 300px; width: 300px; background-color: orange; } .a{ background-color: blue; } </style><script src="../JQuery/jquery-3.1.1.min.js"></script><script type="text/javascript"> $(function(){ $("#d").mouseover(function(){ $(this).addClass('a'); }).mouseout(function(){ $(this).removeClass('a'); }); }) </script> </head> <body> <div id="d"> sdkfjs </div> </body></html>效果如下：当鼠标悬浮在内容区域时为style中a的样式，即背景颜色为蓝色；当鼠标离开内容区域时去除a的样式，即背景颜色变为橘黄色。效果如下：每点击一次就会转换一次效果，a样式由无到有，由有到无操作元素属性：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //获取name属性值alert($("input").attr('name'))//单个修改属性值 $("input").attr('name','321'); $("input").attr('type','password'); $("input").attr('id','test'); //多个属性值一起修改；调用attr方法，把所有要修改的属性放在{}里；属性之间用逗号分割；属性名与属性值之间用冒号隔开 $("input").attr({'name':'321','type':'password','id':'test'}) }) </script> </head> <body> <input type="text" name="123" value="" /> </body> </html>设置元素及内容：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入js--> <script src="../JQuery/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function(){ //获取div标签内部的元素 // alert($("#d").html())//修改div标签里的内容 // $("#d").html('<span>skfksd</span><h1>sfdfgsdds</h1>gfddd');效果如图：//获取div标签内部的文本 // alert($("#d").text())
效果如图：//修改div标签里的文本 // $("#d").text('<p>dfsdfsd</p>123434343') 效果如图：
//获取输入框的value值 alert($("#t").val())
效果如图：//修改value属性值 $("#t").val('12345657')
效果如图:}) </script> </head> <body> <div id="d"> <p>12323423423</p> <a>!@^%@&@&@</a> <!--把标签当作普通文本进行解析--> <xmp><p>dsafsdfsfdsdfs</p></xmp> fsdfdsfsdfsfsd <input type="text" id="t" value="fsfsdfsdfsdfsddf" /> </div> </body> </html>
JQuery转换对象：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>
//导入JQuery对象 <script src="../JQuery/jquery-3.1.1.min.js"> //内部不允许有其他东西 </script> <script> $(function(){ var d=document.getElementById('d'); //方法一：将原生DOM对象（js对象）转换成JQuery对象 $(d).html('1564562');//P标签内的111111变为1564562
//方法二：jquery对象转原生对象,下标只能为0var e=$('#e'); e[0].innerText='222222';//效果为：div标签内的内容为222222
e.get(0).innerText='33333'//效果为：div标签内的内容为33333 }) </script> </head> <body> <p id="d">111111</p>
<div id="e"></div></body></html>
解决多库冲突：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="../JQuery/jquery-3.1.1.min.js"></script> <script> $(function(){ //放弃$符号 jQuery.noConflict(); //此时没有效果 $(d).html('fsdfsdfsdsd'); //放弃$后的写法 jQuery('#a').html('23333') }) </script> </head> <body> <div id="a"></div> </body> </html>选择器：
http://jquery.cuishifeng.cn/
扫一扫
9822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
