JQquery框架

最新推荐文章于 2022-05-06 14:37:30 发布

Munger6

最新推荐文章于 2022-05-06 14:37:30 发布

阅读量869

点赞数

分类专栏： JAVAScript 文章标签： javascript jquery html 函数 ajax

本文链接：https://blog.csdn.net/Munger6/article/details/53526317

版权

JAVAScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

基本介绍

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

Munger6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQquery框架

基本介绍jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities添加jQuery 库head>script type="text/javascript" src="jqu
复制链接

扫一扫

专栏目录