JQquery框架

基本介绍


jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
添加jQuery 库
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

<!--将源码导入,两个版本min版和源码版,一般看源码,用min版,效率更高-->
<script src="js/jQuery-2.2.2-min.js"></script>
$(".p1")的基本原理和代码
案例:封装获取元素的方法;
1、将命名class  id  name传入为text
2、将传入的text进行拆分 .split("");
3、判断拆分后的数组的长度;【1个,2个继续判断操作个数】
4、截取符号;substr(0,1);从0开始截取、一个;
5、根据符号获取其中的方法是寻找id还是其他;
<body>
    <p id="p1">this is p</p>
    <p class="p1">this is p</p>
    <p class="p2 p3">this is p</p>
    <p class="p2">this is p</p>
    <script>
        function $(text){
            //将text文本进行拆分
            var chooseArr = text.split(" ");
            if(chooseArr.length==1){
                //通过传入的符号确定要调用的方法
                var ch = chooseArr[0].substr(0,1);
                switch(ch){
                    case "#":return document.getElementById(chooseArr[0].substr(1));
                    case ".":return document.getElementsByClassName(chooseArr[0].substr(1))
                    default:return document.getElementsByTagName(chooseArr[0]);
                }
            }else{
               //继续判断传入的元素个数
            }
        }


       console.info($(".p1"))   //打印pi调用元素
        $(".p1")[0].style.backgroundColor = "red";  //通过选择元素修改器属性;
    </script>
</body>

第二步:操作Jquery


$(function(){})特点:
1、直接在加载完了程序之后再执行内部程序
2、得到的选择元素对象object(object包含:用什么选择器,元素的值);
  • 而传统的选择器直接得到元素
/*通过jquery方式来实现的元素获取*/
        $(document).ready(function(){
            var op = $("#p1");
            console.info(op);
        });

/*简写版:(可以直接获取)
     $(function(){
            var op = $("#p1");
            console.info(op);
        });

获取到元素(选择器)

通过class获得元素
<!--body端代码-->
   <p id="p1">this is p</p>
    <p class="p1">this is p</p>
    <div></div>
    <input type="text" name="username"/>
    <span name="username">this is span</span>
    
    var op2 = $(".p1");
    console.info(op2);
通过ID获得元素
<!---->Js端代码
    var op1 = $("#p1");
    console.info(op1);

通过name获取元素

var oinp = $("[name=username]");
<!---->也可以用input[name-username](可以直接调用CSS方法,限定元素类型为input  其他name一致的被排除在外)
console.info(oinp);
oinp.css("background-color","red");
通过标签名获取元素
var odiv = $("div");
console.info(odiv);
<!---->获得所有为div的元素;
<!---->得到的集合,可以**实现底层自动循环,不用去找数组的个数;**
通过元素获得其子元素(表格和列表中常用)
$("#ul1 li:first-child").css("color","red");  
 <!---->设置ul1下面的第一个li元素的样式为颜色为红色;在选择元素的时候结合了选择器的方法;
$("#mytable tr:even").css("background-color","red");
$("#mytable tr:odd").css("background-color","pink");
<!---->  even为选中偶数项,从0开始;
<!----> odd为选中奇数项,从0开始;

属性的操作

原始操作:
对象.属性;	对象["属性名"]   属性名当做下标
 /*var op = document.getElementsByName("test")[0];
 /!*对象.属性   op["下标"]*!/
 console.info(op.title);
 console.info(op["title"]);*/
在JQUERy中得到属性:.attr(属性名,属性值);
var value = $("[name=test]").attr("title");
console.info(value);
<!---->传一个值为获取该属性名的值;

  $("[name=test]").attr("title","test1");  
  传一个KEY value的方式;
  传一个参数为参数properties ;
  参数key,回调函数 描述:
移除属性
$("[name=test]").removeAttr("title");
 <!---->移除该属性!要删除的属性名
动态添加class属性
<!---->attr方法:
$("#span1").attr("class","as");
<!---->addclass()方法;

 $("#span1").addClass("as");  //将class设置为空不调用类,
自动循环设置其class属性为index1,2,3,;
/*addClass方法设置class属性,调用方法的时候可以传递一个函数,最后返回一个值*/
        $("#ul1 li").addClass(function(){
            var res = "index"+$(this).index();
            return res;
            });
    【会存在广泛增删后形成的命名一致的问题吗?】

toggleClass(“as”) 将属性class有as类的删除“as”,没有的增加;

/*toggleClass()*/
$("#ul1 li").toggleClass("as");
得到元素内的某个内容
/*html(),封装了js里面innerHTML属性*/
 $("#ul1").html()
 
 <!---->修改htnl内部的所有内容:
 $("#ul1".html(“<li>123</li>”))
text()获取到元素内部的文本内容
$("#span1").text()
val获取所有文本框的值和js里面的属性
$("#btn").on("click",function(){   //点击之后触发事件,将文本内容打印;
            var value = $("input[name=username]").val();
            console.info(value);
        })

筛选:避免JS和JQuery的混合使用

获取制定下标的元素
不推荐的写法:$("li")[0]	$("li").html()  

$("li").eq(-1)    最后一个   
$("li").eq(0)  第一个;
$("li").first()  找到第一个
$("li").last()  找到最后一个
hasClass() 判断当前元素是否有制定的class属性;

特点:

  • 1、有返回true 没有返回false;
var res = $("li").hasClass("li");
 console.info(res);
  • 2、获取的集合返回的内容会默认返回第一个内容【.html获得第一个;text默认得到所有的元素;】
- 使用each()实现循环取出内容;
 $("li").each(function(){
        console.info($(this).html());
    });
//筛选出符合指定条件的元素
<!--filter()从集合中筛选出符合指定条件的元素*/-->
var odiv = $("div").filter(".div");
    console.info(odiv);

has() 包含的方法:

<!--找到li中必须包含子元素为span的	li;-->
 //$("div").has(".span").css("background-color","red");

find()方法;

<!--找到子类的方法:获取元素内部(子类)符合要求的子类;-->

//链式表达
    $("div").find(".span").css("background-color","red");

is();

<!--用来判断是否满足指定条件;-->
受限找到span,看他的父元素是否带有.box属性; 

var boo =$(".span").parent().is(".box");
    console.info(boo);

    boo = $(".box").children().is(".span");
    console.info(bo
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值