zoukankan      html  css  js  c++  java
  • jQuery 基础

    jQuery是什么?

    简单来说 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程。

    第一个知识点:[jQuery几种写法]

    <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        //jQuery写法
    
        /*方式一
        $(document).ready(function(){
            alert('allen')
        });*/
        
        /*方式二
         jQuery(function(){
            alert('go go go ...');
        });*/
        
        /*方式二 简写
        $(function(){
            alert('go go go ...');
        });*/
        
        /*
        $(function(){
            var div1=document.getElementById('div1');
            div1.style.background='red';
            div1.style.height="100px";
        });*/
        
        //改变jQuery默认写法:
        /*
        var jq=jQuery.noConflict()
        jq(function(){
            alert("aaaa");
        });*/
    </script>
    
    

    第二个知识点【jQuery几种选择器】:

    (其中大部分我都注释掉了,去注释可直接运行)

    注:jQuery代码可直接写一个".js"结尾的文件中,下面是为了方便学习,直接全部写在了html这一个文件中

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><!--<div id="div1">div1</div>--><div id="div1"><p class="ll"></p><p class="ll"></p><p class="go"></p><p class="go login regis"></p><p class="go-1"></p><p class="go-2"></p><p class="goo-1"></p><p class="ps"></p><p class="ps"></p><a class="ps"></a><a class="ps"></a><a href="http://www.baidu.com" target="_blank"></a><a href="http://www.baidu.com" target="_blank"></a><a href="http://www.baidu.com"></a><a href="http://www.yangyinghua.com"></a><a href="http://www.yangyinghua.com"></a><div class="ll"></div><div class="ll"></div><div class="ll"></div></div><script type="text/javascript" src="js/jquery-1.12.0.min.js"></script><script type="text/javascript">//(1)核心选择器:/*比如jQuery 中 length属性,:jQuery中有多少元素*///选择所有元素/*
            $(function(){
                alert($("*").length); // *代表选取所有元素
            });*//*
            $(function(){
                alert($("#div1 *").length);
            });*///选择特定类型的元素/*
            $(function(){
                alert($("div").length);
            })*///选择具有特定class的元素/*
            $(function(){
                alert($("p.ll").length);
            });*///选择具有特定class的某类元素/*
            $(function(){
                alert($("p.ll").length);
            });*///选择具有特定id属性值的元素/*
            $(function(){
                alert($("#div1").length);
            });*///(2)属性选择器//选取定义了attr(attr只是一个名字而已)属性的元素,即使这个属性没有值/*
            $(function(){
                alert($("[href]").length);
            });*///选取attr属性值等于字符串val的元素/*
            $(function(){
                alert($("[href='http://www.yangyinghua.com']").length);
            });*///选取attr属性值等于字符串val的元素/*
            $(function(){
                alert($("[class^='l']").length);
            });*///选取attr属性值以字符串val结尾的元素/*
            $(function(){
                alert($("[class$='l']").length);
            });*///选取attr属性值包含字符串val的元素/*
            $(function(){
                alert($("[class*='l']").length);
            });*///选取attr属性值其中一个值是字符串val的元素/*
            $(function(){
                alert($("[class~='login']").length);
            });*///选取attr属性值等于字符串val,或属性值为连字符分割的值列表且第一个值是字符串val的元素/*
            $(function(){
                alert($("[class|='go']").length);
            });*///复合属性选择器,需要同时满足多个条件时使用/*
            $(function(){
                alert($("[href='http://www.baidu.com'][target='_blank']").length);
            });*/
    
            $(function(){
                alert($("p[class='ps']").length);
            });
            
            //还有其他选择器知识之后补充...</script></body></html>







  • 相关阅读:
    nodeJS + webStrome
    js获取浏览器窗口属性
    理解JavaScript中的arguments,callee,caller,apply
    Java对象及对象引用变量
    Transform-style和Perspective属性
    线程同步的几种方式
    SQL高级查询——50句查询(含答案)
    接口、抽象类的区别与共同点
    JAVA异常架构图及常见面试题
    【转】JVM介绍
  • 原文地址:https://www.cnblogs.com/bruceg/p/5444667.html
Copyright © 2011-2022 走看看