jquery基础详解编程语言

jquery:

jquery方法文档:http://www.php100.com/manual/jquery/

JS –>操作浏览器HTML -> 用户可视化

JS 语言 运行在浏览器

jQuery –>js的类库,是对js的一个封装,极大的方便了使用

基本的选择器使用:

选择器 
   - id选择器 
    - #t1 
        <div id="t1"></div> 
    $('#t1') 
 
   - class选择器 
    - .t2 
        <div class="t2"></div> 
        $('.t2') 
 
   - 标签选择器 
    <p>fdafdsaf</p> 
    <p>fdafdasf</p> 
    $('p') 
 
   - 找tt下面的p标签,中间用空格 
<div id="tt"> 
	<div class="t3"> 
	    <p></p> 
	    <span> 
	</div> 
</div> 
 
$("#tt p")         <!-- 找tt下面的p标签,中间用空格--> 
 
  - 找到class=t5的标签和所有a标签,用逗号 
        <p class="t5"></p> 
	    <span> 
        <a></a> 
$('.t5,a')          <!--找到class=t5的标签和所有a标签,用逗号 --> 

左侧菜单的收缩功能:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style> 
        .hide{ 
            display: none; 
        } 
    </style> 
</head> 
<body> 
    <div> 
 
        <div> 
            <div id="m1" onclick="Change(1)">菜单一</div> 
            <div> 
                <div>1</div> 
                <div>2</div> 
                <div>3</div> 
            </div> 
        </div> 
 
        <div> 
            <div id="m2" onclick="Change(2)">菜单二</div> 
            <div class="hide"> 
                <div>11</div> 
                <div>22</div> 
                <div>33</div> 
            </div> 
        </div> 
 
        <div> 
            <div id="m3" onclick="Change(3)">菜单三</div> 
            <div class="hide"> 
                <div>111</div> 
                <div>222</div> 
                <div>333</div> 
            </div> 
        </div> 
    </div> 
 
<script src="jquery-1.8.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    function Change(arg){ 
        //找到,到底点击哪一个 
        if(arg==1){ 
            var menu = $('#m1') 
        }else if(arg==2){ 
            var menu = $('#m2') 
        }else{ 
            var menu = $('#m3') 
        } 
        console.log(menu.text()) 
    } 
 
</script> 
 
</body> 
</html> 
<!--  <p>1111111</p> --> 
<!-- menu.text() 获取两个标签之间的内容,这样获取内容为1111111 -->

 优化后的代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style> 
        .hide{ 
            display: none; 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <div> 
            <div onclick="Change(this);">菜单一</div> 
            <div class="content"> 
                <div>1</div> 
                <div>2</div> 
                <div>3</div> 
            </div> 
        </div> 
 
        <div> 
            <div onclick="Change(this);">菜单二</div>      <!--this表示你点击的当前标签 --> 
            <div class="content hide"> 
                <div>11</div> 
                <div>22</div> 
                <div>33</div> 
            </div> 
        </div> 
 
        <div> 
            <div onclick="Change(this);">菜单三</div> 
            <div class="content hide"> 
                <div>111</div> 
                <div>222</div> 
                <div>333</div> 
            </div> 
        </div> 
 
        <div> 
            <div onclick="Change(this);">菜单四</div> 
            <div class="content hide"> 
                <div>1111</div> 
                <div>2222</div> 
                <div>3333</div> 
            </div> 
        </div> 
    </div> 
 
<script src="jquery-1.8.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    function Change(arg){ 
        //找到,到底点击哪一个 
        //$arg表示当前点击的标签 
        var t = $(arg).text(); 
        console.log(t); 
        //1.找到下一个标签,移除hide 
        //$(arg).next(); 
        //当前标签的下一个标签 
        //removeClass('') 移除一个hide标签 
        $(arg).next().removeClass('hide'); 
        //2.找到其他菜单,内容隐藏,添加hide 
        //当前标签的父标签 $(arg)parent() 
        //所有父亲标签的兄弟标签 $(arg).parent().siblings() 
        $(arg).parent().siblings().find('.content').addClass('hide'); 
 
    } 
</script> 
 
</body> 
</html> 

  

  

 

  

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/11683.html

(0)
上一篇 2021年7月19日 11:44
下一篇 2021年7月19日 11:45

相关推荐

发表回复

登录后才能评论