JQuerry简介

最新推荐文章于 2023-08-12 10:47:33 发布

snail131

最新推荐文章于 2023-08-12 10:47:33 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_36807080/article/details/76095770

版权

 
  
 JQuerry 

 
 jQuery是一个快速、简洁的JavaScript框架 

 
 其宗旨是——WRITE LESS,DO MORE，写更少的代码，做更多的事情。 

 
 它是轻量级的js库(压缩後只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 

 
 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、event 

 
 实现动画效果，并且方便地为网站提供AJAX交互。 

 
 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 

 
 JQuerry 
 的优势

 
 可以像CSS一样访问和操作dom 

 
 修改CSS控制页面外观 

 
 优化js的代码操作 

 
 事件处理更加容易 

 
 动画效果使用方便 

 
 ajax技术更加完美 

 
 大量的基于jquery的插件 

 
 可以自定义扩展功能插件 

 
 JQuerry 
 的语法

 
 格式：￥（selector）.action（） 

 
 选择符selector查询和查找HTML元素 

 
 action执行对元素的操作 

 
 示例 

 
 $（'p'）.hhide():隐藏p元素 

 
 例子 

 
 <!-- 导入jquery文件--> 

  <script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"> 

  </script> 

  </head> 

  <body> 

  <P>DASDSADASDSADS</P> 

  <P>DWWWWWWWWWWWWWS</P> 

  </body> 

  <script> 

  //隐藏元素 

  $('P').hide(); 

  </script> 

 
 JQuerry 
 的文档就绪函数

 
 为了防止文档再完全加载之前运行jquerry 

 
 原生 文档就绪函数写法，（表示网页加载完了（不包括图片视频 等等），再执行里面的函数） 

 
  $(document).ready(function(){  
 
  $('P').hide();  
 
  })

 
  
 简化版文档就绪函数 

 
  $(function(){  
 
  $('P').hide();  
 
  })

 
 JQuerry 
 的对象转换 

 
 $(js对象) //原生dom对象（js对象）转换成jq对象方法： 

 
 1.$(...)[0] 2.$(...).get(0) // jquery对象转原生对象: 

 
 例子 

 
 <script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> 

  <script type="text/javascript"> 

  $(function(){ 

  var d=document.getElementById('d'); 

  // d.innerText='dddd'; 

  // var d=$("#d"); 

  //原生dom对象（js对象）转换jquery对象:$(原生对象) 

  $(d).html('fsdfsdfsdsd'); 

  var e=$("#e"); 

  //jquery对象转原生对象:1.$(...)[0] 2.$(...).get(0) 

  // e[0].innerText='sdsdsds'; 

  e.get(0).innerText='sdsssdsd'; 

})

  </script> 

  </head> 

  <body> 

  <div id="d"> 

  </div> 

  <div id="e"> 

  </div> 

  </body> 

 
 JQuerry 
 的选择器 

 
 详情可以看这个网址 
 http://jquery.cuishifeng.cn/descendant.html 

 
 1.层级选择器：下面四个 

 
 后代选择器 $('父代 空格 子代') 如：$("form input") 

 
 相邻选择器 $("label + input") 匹配所有跟在 label 后面的 input 元素 

 
 子代选择器 $("form > input") 用以匹配元素的选择器，并且它 。 是第一个选择器的子元素 

 
 同辈选择器 $("form ~ input") 找到所有与表单同辈的 input 元素 

 
 2.属性选择器 

 
 class（类）选择器 $(".myClass"); 查找所有类是 "myClass" 的元素. 

 
 ID选择器 $("#myDiv"); 查找 ID 为"myDiv"的元素 
 。 

 
 3.内容选择器 

 
 text $("div:contains('John')") 查找所有包含 "John" 的 div 元素 

 
 4. 标签选择器 $("div"); 一个用于搜索的元素。指向 。. . DOM 节点的标签名。 

 
 JQuerry 
 的dom操作 

 
 1.设置元素和内容 

 
 html() 获取元素中HTML内容 

 
 html(value) 设置元素中HTML内容 

 
 text() 获取元素文本内容 

 
 text(value) 设置元素文本内容 

 
 val() 获取表单中的文本内容 

 
 val(value) 设置表单中的文本内容 

 
 例子 

 
 <title>设置元素及内容</title> 

  <script src="../../js/jquery-3.1.1.min.js"></script> 

  </head> 

  <body> 

  <div id="d"> 

  <p>dsdsadsad</p> 

  <a href="">dasds</a> 

  ddsdsadas 

  <input type="text" id="t" value="wwwwww"/> 

  </div> 

  </body> 

  <script> 

  $(function () { 

  //获取div标签内部的元素 

  // alert($('#d').html()); 

  // 修改div标签的内容 

  // $('#d').html('<span>wwwww</span>'); 

  //获取div标签的内部文本，获取div中所有内容包括子代中 

  // alert($('#d').text()) 

  //修改div中的內容，text输入的内容变为字符串 

  // $('#d').text('ddddd') 

  //获取输入框的value 

  alert($('#t').val()); 

  // 修改value值 

  $('#t').val("qqqq"); 

})

  </script> 

 
 2.操作元素属性 

 
 attr(key) 获取某个元素key属性的属性值 

 
 attr(key，value) 设置某个元素key属性的属性值 

 
 attr（｛key1:value1,key2:value2....｝） 设置某个元素多个key属性的属性值 

 
 attr(key,function(index,value){}) 设置某个元素key通过fn来设置 

 
 例子 

  <title>操作元素属性</title> 

  <script src="../../js/jquery-3.1.1.min.js"></script> 

  </head> 

  <body> 

  <input type="text" name="123" value=""/> 

  </body> 

  <script> 

  $(function(){ 

  // 获取name属性值 

  // alert($('input').attr('name')); 

  // 修改那么属性值 

  // $('input').attr('name','321') 

  // 修改type 

  // $('input').attr('type','password') ; 

  // 设置新的属性 

  // $('input').attr('id','test') ; 

  // 多个属性值一起修改。把所有要修改的属性放在大括号里面。每个属性用，隔开。而属性值用：隔开。 

  $('input').attr({'name':'321','type':'password','id':'test'}) ; 

})

 
 3.操作CSS 

 
 CSS({name1:value1,name2:value2}) 设置某个元素行内多个CSS样式 

 
 addClass(class) 给某个元素添加一个CSS类 

 
 addClass(class1 class2 class3) 给某个元素添加多个CSS类 

 
 removeClass(class) 删除某个元素的CSS类 

 
 removeClass(class1 class2) 删除某个元素的多个CSS类 

 
 toggleClass（class） 来回切换默认样式和指定样式 

 
 toggleClass（class1 class2） 同上 

 
 toggleClass（class，switch） 设置切换频率 

 
 toggleClass（function（）｛｝） 通过匿名函数设置切换规则 

 
 toggleClass（function（）｛｝，switch） 在匿名函数设置时也可以设置频率 

 
 toggleClass（function（i,c,s）｛｝，switch） 匿名函数设置时传递三个参数 

 
 例子 

  <title>通过jq修改CSS样式</title> 

  <script src="../../js/jquery-3.1.1.min.js"></script> 

  </head> 

  <body> 

  <div> 

ddd

  </div> 

  </body> 

  <script> 

  $(function(){ 

  // $('div').css('background-color','blue'); 

  $('div').css({'background-color':'blue','font-size':'50px'}); 

})

  </script> 

 
 4.节点的添加和删除 

 
 添加节点 $("div").append(table) 

 
 删除节点 table.remove() 

 
 例子 

  <script type="text/javascript"> 

  $(function () { 

  var table = $("<table id='t' border='1'><tr><td>123</td></tr></table>") 

  // 添加表格 

  $("div").append(table); 

  // 删除表格 

  // table.remove(); 

  // 克隆 

  table.clone().appendTo($("div")) 

})

  </script> 

关注