zoukankan      html  css  js  c++  java
  • 前端day15 jquery基本使用 jqueryDOM和原生DOM jQuery选择器 jquery-筛选器-过滤 jquery筛选器-查找 jquery-筛选器-查找-串联

    1.jquery的介绍

    2.jquery的基本使用

    2.2文档就绪事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>jQuery DOM对象</title>
    	<style>
    		#box {
    			400px;
    			padding: 20px;
    			border: 1px solid #ccc;
    		}
    	</style>
    </head>
    <body>
    	<h1>jQUery 交友</h1>
    	<hr>
    
    	<div id="box"></div>
    	<ul class="list">
    		<li>Lorem ipsum dolor sit amet.</li>
    		<li>Lorem ipsum dolor sit amet.</li>
    		<li>Lorem ipsum dolor sit amet.</li>
    		<li>Lorem ipsum dolor sit amet.</li>
    		<li>Lorem ipsum dolor sit amet.</li>
    	</ul>
    
    
    	<script src="../jquery-3.3.1.js"></script>
    	<script>
    		
    		$(function(){
    
    			//获取元素对象
    			var $box = $('#box');  //返回的是jquery dom对象 jquery在原生dom的基础上进行了封装
    			var box = document.querySelector('#box');  //原生的JS dom
    
    			console.log($box, box);
    
    
    			$box.css('background-color', 'pink');
    			//box.css('background-color', 'green'); // function not defined
    			box.style.backgroundColor = 'red';
    			//$box.style.height = '300px';
    
    
    			//jquery DOM 和 原生JS DOM 有关系
    			//原生的DOM  转为 Jquery DOM
    			$(box).css('height', '200px');
    
    			//jquery DOM 对象 转为 原生 DOM  本质上 jquery就是由 原生dom组成的 类数组对象
    			$box[0].style.backgroundColor = 'green';
    
    
    		});
    
    
    		$(function(){
    			var lis = $('.list li');
    			lis.css('border', '1px solid pink');
    
    		})
    	</script>
    </body>
    </html>

    2.3 jquerydom和原生dom

  • 相关阅读:
    qt5--数据类型转换
    qt5-QWidget坐标系统和大小和展示区域
    qt5---布局
    qt5-信号和槽
    tomcat中文请求乱码问题
    centos安装ab测试工具
    golang学习之go简单博客应用
    nodejs的jsonrpc调用
    centos下mongodb安装
    使用connect-multiparty限制nodejs图片上传
  • 原文地址:https://www.cnblogs.com/wangmiaolu/p/9514450.html
Copyright © 2011-2022 走看看