• jQuery入门


    一.jquery通过选择器精准找到元素:

    <style type="text/css">
    			div{padding:8px 0px;font-size: 12px;text-align: center;border:solid 1px #888;}
    </style>
    
    <script src="jquery-2.2.1.min.js" type="text/javascript">
    </script>
    
    <script type="text/javascript">
    	$(document).ready(function (){
    		$("div").html("Hello,welcome to jquery");
    	});
    			
    </script>
    

    CLASS:

    	<style type="text/css">
    		.frame { border:solid red 1px ;font-size:13px;}
    		.title { padding :6px ;background-color:#EEE;}
    		.content { padding :8px 0px;font-size:12px;text-align:center;display:none;}
    		.curcol { background-color:yellow;}
    
    	</style>
    	<script type="text/javascript">
    		$(function(){
    			$(".content").html("Hello,welcome to jQuery");
    			$(".title").click(function(){
    				$(this).addClass("curcol").next(".content").css("display","block");
    			});
    		});
    	</script>
    </head>
    <body>
    	<div class="frame">
    		<div class="title">标题</div>
    		<div class="content"></div>
    	</div>
    </body>
    

      

     

      

    ID:

    <input id = "btnSubmit" type = "button" value = "submit" class = "btn" onclick = "btn_Click();" /><br/><br/>
    

      

    $("#btnSubmit").click(function(){}
    

      

    总结:

    ID:$("#name")

    CLASS:$(".name")

    二.学习到的几个重要函数:

    1. $(document).ready(function (){})  =  $(function(){})

    2.

    			$(".title").click(function(){
    				$(this).addClass("curcol").next(".content").css("display","block");
    			});
    

      

    分析:$(".title")找到对应的元素,给他添加click监控器,接下来就是click的响应函数的内容:$(this).addClass("curcol").next(".content").css("display","block");

    首先,这里的this是指调用这个函数的主体,也就是$(".title")这个元素,addClass函数的作用是给调用的元素添加一种样式,这里给$(".title")元素追加了“curcol”样式,这里对$(".title")元素的操作结束了,使用.next()函数转对其他元素进行操作。这里转对$(".content")元素进行处理。对$(".content")元素使用css()函数来对现有的css样式进行修改。

    注:addClass 是追加样式,在现有的样式上面追加一些其他东西。

          css 是对现有的样式进行修改

      另外,$(this).toggleClass("new");是对元素样式的动态切换。比如:

    			$(".defcol").click(function(){//旧的样式名为old
    				$(this).toggleClass("new");
    			})
    

      

    一开始,defcol的样式名为“old”,当用户点击到defcol元素时,defcol元素抛弃了“old”元素,使用“new”样式,当用户再次点击defcol元素,defcol抛弃“new”样式,使用“old”样式。类似循环,动态切换。

    3.

    var oRdoValue=$("#Radio1").is(":checked")?"man":"woman";
    

    如果Radio1被勾选,则oRdoValue的值是man,反之是woman

    以上,就是进段时间对jQuery的入门摸索。

  • 相关阅读:
    MySQL 5.7.19 CentOS 7 安装
    cocos2d-x JS 弹出对话框触摸监听(吞噬点击事件遮挡层)
    cocosStudio制作ScrollView并在cocos2dx 3.0中使用。
    cocos2dx JS 游戏切到后台再进入游戏的处理
    使用Eclipse出现make: *** No rule to make target `all'. Stop.解决办法
    cocos2dx 3.13 在Mac平台下配置安卓环境变量
    (已解决)Eclipsez中打不开c++文件,显示Editor could not be initialized.
    延期版本webstorm(解决许可证过期,注册,激活,破解,码,支持正版,最新可用)
    cocos2dx JS 层(Layer)的生命周期
    Cocos2d-JS studio基础控件的使用
  • 原文地址:https://www.cnblogs.com/yns-blogs/p/5250554.html
Copyright © 2020-2023  润新知