zoukankan      html  css  js  c++  java
  • jQuery标签选择器

    //alert("Hello jquery");
    	
    	//选择器
    	//id选择器
    	$("#bt1").click(
    			function()
    			{
    				alert("点击了按钮 文字=");
    			}
    	
    	);
    	//标签选择器
    	//属性过滤器
    	$("input[type=button]").click(
    			
    		function()
    		{
    			alert("通过标签选择器,选中了老付");
    		}
    	);
    	
    	//类选择器
    	$(".cl").click(
    			
    		function()
    		{
    			alert("老付是个王八蛋!!!");
    		}
    	);
    	
    	//使用DOM方式获取元素
    	var bt_3 = document.getElementById("bt3");
    	var $jbt_3 = $(bt_3);
    	$jbt_3.click(
    			
    		function()
    		{
    			alert("从DOM对象转为jQuery!!!");
    		}
    	);
    

      对象转换

    //从jQuery对象转到DOM对象
    	var $jbt_1 = $("#bt1");
    	alert("集合长度="+$jbt_1.length);
    	var bt_1 = $jbt_1[0];
    	alert("DOM按钮的内容="+bt_1.value);
    	
    	var $jbt_4 =$("button");
    	var bt_4 =$jbt_4[0];
    	alert("DOM按钮的内容==="+bt_4.firstChild.nodeValue);
    	
    	
    	$jbt_4.click(
    			
    		function()
    		{
    			alert("button的文本="+$(this).text());
    		}
    	);
    }
    )
    

      

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    
    <script type="text/javascript">
    //调用jQuery
    //相当于window.load()  当窗口加载完毕之后触发
    $(function(){
    	
    	//alert("Hello jquery");
    	
    	//选择器
    	//id选择器
    	$("#bt1").click(
    			function()
    			{
    				alert("点击了按钮 文字=");
    			}
    	
    	);
    	//标签选择器
    	//属性过滤器
    	$("input[type=button]").click(
    			
    		function()
    		{
    			alert("通过标签选择器,选中了老付");
    		}
    	);
    	
    	//类选择器
    	$(".cl").click(
    			
    		function()
    		{
    			alert("老付是个王八蛋!!!");
    		}
    	);
    	
    	//使用DOM方式获取元素
    	var bt_3 = document.getElementById("bt3");
    	var $jbt_3 = $(bt_3);
    	$jbt_3.click(
    			
    		function()
    		{
    			alert("从DOM对象转为jQuery!!!");
    		}
    	);
    	
    	//从jQuery对象转到DOM对象
    	var $jbt_1 = $("#bt1");
    	alert("集合长度="+$jbt_1.length);
    	var bt_1 = $jbt_1[0];
    	alert("DOM按钮的内容="+bt_1.value);
    	
    	var $jbt_4 =$("button");
    	var bt_4 =$jbt_4[0];
    	alert("DOM按钮的内容==="+bt_4.firstChild.nodeValue);
    	
    	
    	$jbt_4.click(
    			
    		function()
    		{
    			alert("button的文本="+$(this).text());
    		}
    	);
    }
    )
    
    </script>
    
    </head>
    <body>
    测试jQuery
    <br>
    <input id="bt1" type="button" value="按钮1"><br>
    <input class="cl" id="bt2" type="button" value="按钮2"><br><br>
    <input class="cl" type="text">
    <br>
    
    <input id="bt3" value="按钮3" type="button">
    
    
    <br>
    <button id ="bt4">按钮4</button>
    <br>
    <button id ="bt5">按钮5</button>
    </body>
    </html>
    

      

  • 相关阅读:
    ngx-bootstrap使用04 carousel组件
    ngx-bootstrap使用03 Alerts组件、利用Object.assign复制对象
    ngx-bootstrap使用02 Accordion组件的使用
    ngx-bootstrap使用01 安装ngx-bootstrap和bootstrap及其使用、外部样式引入
    SpringBoot11 读取properties文件、发送邮件
    SpringBoot10 整合JSP
    SpringBoot09 自定义servlet、注册自定义的servlet、过滤器、监听器、拦截器、切面、webmvcconfigureradapter过时问题
    红帽系统制作yum本地源
    利用python数据分析panda学习笔记之基本功能
    利用python数据分析panda学习笔记之DataFrame
  • 原文地址:https://www.cnblogs.com/liuyanzeng/p/6094840.html
Copyright © 2011-2022 走看看