【JQuery】入门基础总结

    xiaoxiao2025-01-08  12

    一、前言:

            JQuery是一个优秀的JavaScript库,它能兼容CSS3以及各种浏览器,此外,JQuery还能实现动画效果,并且为网站提供AJAX交互。

    二、JQuery的特点:

            ①Write less,Do more

            ②jQuery is designed to change the way that you write JavaScript.

            ③支持各种主流浏览器,包括IE6以上,FireFox2以上,Safari2以上和Opera9以上的版本。

    三、核心:

            $是jquery类的一个别名,$()构造一个jQuery对象,来实现jQuery的核心功能。

            ①${表达式}:根据这个表达式来查找所有的匹配元素。

    $("div>p");查找所有p元素,且这些p元素都是div的子元素。 $("input:radio",document.forms[0]); //查找文档第一个表单中,所有的单选按钮。 $(“div”,xml.responseXML); //在一个由ajax返回的xml文档中,查所有的div元素。

            ②$(html标记字符串):根据提供的html字符串,创建jquery对象包装的dom元素。   

    $("<div><p>Hello</p></div>").appendTo("body"); //创建一个 <input> 元素必须同时设定 type 属性 $("<input type='text'>")

            ③ $(dom元素):将一个或多个dom元素转换为jQuery对象。

    $(document.body).css("background","black") //设置页面背景色

            ④$(document).ready(function(){})==$(function(){});//页面加载完成后自动执行的代码

    三、jquery对象访问:

           eq返回的是jQuery对象,只能使用jQuery方法,get返回的是dom元素对象,只能使用dom方法。

      1、$(dom元素).each(function(){}):以每一个匹配的元素作为上下文来执行一个函数

      2、$(dom元素).size()==$(dom元素).length;对象中元素的个数。eg:<img src="test1.jpg"/> <imgsrc="test2.jpg"/>,jquery代码:$("img").size(); 返回2        3、context:返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。        4、$(dom元素).get():取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。        5、$(dom元素).get(index):取得其中一个匹配的元素.        6、$(dom元素).index():搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。

    四、jQuery选择器

           在DOM编程中,我们只能使用有限的函数根据id或者TagName获取DOM对象,而在JQuery中则完全不同,JQuery提供了强大的选择器来获取页面上的对象,并且将对象以JQuery包装集的形式返回。JQuery选择器可以分为:基础选择器、层次选择器、基本过滤器、内容过滤器、可见性过滤器、内容过滤器、属性过滤器、子元素过滤器等。

            基础选择器是重中之重,大家需要牢记于心。

            

    转载请注明原文地址: https://ju.6miu.com/read-1295270.html
    最新回复(0)