简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > PHP全栈开发之jQuery初体验
Blogger Information
Blog 61
fans 0
comment 0
visits 62722
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP全栈开发之jQuery初体验
Pengsir
Original
696 people have browsed it

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="jquery-3.2.1.min.js"></script>
   <title>1.原生querySelector()与querySelectorAll()获取元素实例</title>
</head>
<style>
   ul li {
       float: left;
       display: inline;
       margin-left: 10px;
   }
</style>
<body>
<ul>
   <li><img src="img1.jpg" alt=""></li>
   <li><img src="img2.png" alt=""></li>
   <li><img src="img3.jpg" alt=""></li>
   <li><img src="img4.jpg" alt=""></li>
   <li><img src="img5.jpg" alt=""></li>
</ul>
<script>
   ////    1.原生querySelector()与querySelectorAll()获取元素实例
   //    var img =document.querySelector("img")
   ////    将第一个img,设置为50px圆角
   //    img.style.borderRadius = '50px'

   //    1.2 将所有img 设置为500px圆角
var img2 = document.querySelectorAll('img')
   //    将所有的img，设置为500px
for (var i = 0; i < img2.length; i++) {
       img2[i].style.borderRadius = '500px'
}

   //2.jQuery对象的参数与基本语法，ready()事件注册实例
   //    jQuery是一个函数库，不是框架，（在文档头部使用本地和远程引入两种方法都可以），jQuery是一个工厂函数，简写:$
$('img')[0].style.borderRadius = '50px' //相等于$('img',document)[0].style.borderRadius
$('img').css('width', '100px')//选中所有img，宽度设置为100

var img =$('img')
  for (var i = 0; i < img.length; i++) {
       img[i].style.borderRadius = '10px'
}//用jQuery方法对img,设置圆角为10px

   //3. jQuery中的事件注册与删除： on()和off()方法的使用
$(document.images).mouseenter(function () {//普通事件添加
$(this).hide(1000)
   }).mouseleave(function () {
       $(this).show(2000)
   })
//on('click',function () {}是点击触发事件    off('mouseenter')关闭鼠标进入的功能
$('img').on('click',function () {
       $(this).css('width','1000px')
   }).off('mouseenter')

//4.reday()事件注册，放在head中和放在这里，速度差不多。
$(document).ready(function () {
       alert('准备完成')
   })
</script>
</body>
</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！