前端07 /jQuery初识

目录

  • 前端07 /jQuery初识

    • 1.jquery介绍

      • 1.1 jquery的优势
      • 1.2 jquery是什么?
      • 1.3 jquery的导入
    • 2.jQuery的使用
      • 2.1使用 jQuery 的基本步骤
      • 2.2 jQuery的$符号
      • 2.3jQuery的入口函数
    • 3.js中的DOM对象 和 jQuery对象比较（重点，难点）
      • 3.1 二者之间的区别
      • 3.2 jquery对象和dom对象的关系和转换
    • 4.jQuery查找标签
      • 4.1 jquery选择器
      • 4.2 jquery筛选器
    • 5. 链式表达式
    • 6.操作标签
      • 6.1 样式操作
      • 6.2 css操作
      • 6.3 位置操作
      • 6.4 尺寸
      • 6.5 文本操作

前端07 /jQuery初识

1.jquery介绍

1.1 jquery的优势

1.链式编程：
    多个操作（函数）以点(.)连成链，形成链式表达
    比如.show()和.html()可以连写成.show().html()。
2.隐式迭代：
    隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

1.2 jquery是什么?

1.jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
2.js库是把我们常用的复杂功能封装到简单的方法中，我们用的时候，将库直接引入然后调用方法即可。
3.初期主要是如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能API。这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
4.版本说明：
    jQuery 有三个大版本：
    1.x版本：最新版为 v1.11.3。
    2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。
    3.x版本。

1.3 jquery的导入

下载链接：jQuery官网  https://jquery.com/
中文文档：jQuery AP中文文档
https://code.jquery.com/jquery-3.4.1.js 未压缩版
https://code.jquery.com/jquery-3.4.1.min.js 压缩版
导入方式：
方式一：
    下载:保存在本地文件里
    引入:<script src="jquery.js"></script>
方式二（网络地址引入）：
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

2.jQuery的使用

2.1使用 jQuery 的基本步骤

下载 ：jQuery有两个文件，一个是jquery-3.4.1.js(未压缩版)，一个是jquery-3.4.1.min.js(压缩版,推荐项目上线时使用)

关于jQuery的相关资料：
    官网：http://jquery.com/
    官网API文档：http://api.jquery.com/
    汉化API文档：http://www.css88.com/jqapi-1.9/
    jquery 在线手册：http://hemin.cn/jq/

注意：导包的代码一定要放在js代码的最上面。

2.2 jQuery的$符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

<script src="jquery-3.3.1.js"></script>
<script>
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
</script>

从打印结果可以看出，$ 代表的就是 jQuery。

$就是jQuery名字的简写,实际上是一回事儿

2.3jQuery的入口函数

原生 js 的入口函数指的是：window.onload = function() {}; 如下：

//原生 js 的入口函数。页面上所有内容加载完毕，才执行。
        //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
       window.onload = function () {
           alert(1);
       }

jQuery的入口函数，有以下几种写法：

写法一：文档加载完毕，图片不加载的时候，就可以执行这个函数。

$(document).ready(function () {
           alert(1);
       })

写法二：文档加载完毕，图片不加载的时候，就可以执行这个函数。（写法一的简洁版）

$(function () {
           alert(1);
       });

写法三：文档加载完毕，图片也加载完毕的时候，在执行这个函数。

$(window).ready(function () {
           alert(1);
       })

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：
- Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
- jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：
- Js的入口函数是在**所有的文件资源加载**完成后，才执行。这些**文件资源**包括：页面文档、外部的js文件、外部的css文件、图片等。
- jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的**外部资源**都加载完成。

文档加载的顺序：从上往下，边解析边执行。

3.js中的DOM对象 和 jQuery对象比较（重点，难点）

3.1 二者之间的区别

通过 jQuery 获取的元素是一个jq对象数组，其中包含着原生JS中的DOM对象。举例：

针对下面这样一个div结构：

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>

通过原生 js 获取这些元素节点的方式是：

    var myBox = document.getElementById("app");           //通过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
    var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

   //获取的是数组，里面包含着原生 JS 中的DOM对象。
　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

3.2 jquery对象和dom对象的关系和转换

jquey方法找到的标签对象称为jquery对象
原生js找到的标签对象称之为DOM对象
dom对象只能调用dom对象的方法，jquery对象只能用jquery方法，不能互通

1、 DOM 对象 转为 jQuery对象：

$(js对象);

2、jQuery对象 转为 DOM 对象：

  jquery对象[index];      //方式1（推荐）
  jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

4.jQuery查找标签

4.1 jquery选择器

基本选择器、层级选择器、属性选择器

4.1.1基础选择器

$("#id")  //不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器
$("#id")         //id选择器
$("tagName")     //标签选择器
$(".className")  //class选择器
$("*")           //通用选择器

$("div.c1")      // 交集选择器 找到有含有c1类的div标签
$("#id, .className, tagName") //并集选择器

div.c1交集选择器      div,p并集选择器
$('div.box')
k.fn.init?[div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init?[document]__proto__: Object(0)
$('div,p,a')
k.fn.init(4)?[div.box, a, a, p, prevObject: k.fn.init(1)]

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="jquery3.4.1.js"></script>
    <script type="text/javascript">
        //入口函数
        $(function(){
            //三种方式获取jquery对象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $('div');
            //操作标签选择器
            jqBox3.css('width', '100');
            jqBox3.css('height', 100);
            jqBox3.css('background-color', 'red');
            jqBox3.css('margin-top', 10);
            //操作类选择器(隐式迭代，不用一个一个设置)
            jqBox2.css("background", "green");
            jqBox2.text('哈哈哈')
           //操作id选择器
            jqBox1.css("background", "yellow");
        })
    </script>
</body>
</html>

4.1.2 层级选择器

空格 后代选择器    >子代选择器 +毗邻选择器  ~弟弟选择器
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

示例代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代：儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

4.1.3 属性选择器

$('[属性名]')         必须是含有某属性的标签
$('a[属性名]')        含有某属性的a标签
$('选择器[属性名]')    含有某属性的符合前面选择器的标签
$('选择器[属性名="aaaa"]')  属性名=aaa的符合选择器要求标签
$('选择器[属性名$="xxx"]')  属性值以xxx结尾的
$('选择器[属性名^="xxx"]')  属性值以xxx开头的
$('选择器[属性名*="xxx"]')  属性值包含xxx
$('选择器[属性名1][属性名2="xxx]')  拥有属性1,且属性二的值='xxx',符合前面选择器要求的

示例写法

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

4.2 jquery筛选器

4.2.1 基础筛选器

$('选择器:筛选器')
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 根据含有某个后代筛选

示例写法

$('li:has(span)');

$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈，基本过滤选择器</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>

        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function(){
            //获取第一个 :first ,获取最后一个 :last

            //奇数
            $('li:odd').css('color','red');
            //偶数
            $('li:even').css('color','green');

            //选中索引值为1的元素 *
            $('li:eq(1)').css('font-size','30px');

            //大于索引值1
            $('li:gt(1)').css('font-size','50px');

            //小于索引值1
            $('li:lt(1)').css('font-size','12px');    

        })
    </script>
</html>

简单绑定事件的示例

// 绑定事件的方法
$('#btn').click(function () {
    $('.mode')[0].classList.remove('hide');
    $('.shadow')[0].classList.remove('hide');
    jquery写法:
    $('.mode,.shadow').removeClass('hide');
})

4.2.2 表单筛选器

type筛选器
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的

示例代码

    <div>
        用户名: <input type="text">
    </div>

    <div>
        密码: <input type="password">
    </div>

    <div>
        sex:
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <input type="radio" name="sex">不详
    </div>

    找到type为text的input标签:$(':text')
表单对象属性（状态筛选器）
enabled
disabled
checked
selected

$(':disabled')
jQuery.fn.init?[input, prevObject: jQuery.fn.init(1)]
$(':enabled')
jQuery.fn.init(15)?[input, input, input, input, input, input, input, input, input, input, input, select, option, option, option, prevObject: jQuery.fn.init(1)]
$(':checked')
jQuery.fn.init(4)?[input, input, input, option, prevObject: jQuery.fn.init(1)]
$(':selected')
$(':checkbox:checked')
jQuery.fn.init(2)?[input, input, prevObject: jQuery.fn.init(1)]
$('input:checkbox:checked')
jQuery.fn.init(2)?[input, input, prevObject: jQuery.fn.init(1)]

示例代码

    <div>
        用户名: <input type="text">
    </div>

    <div>
        密码: <input type="password" disabled>
    </div>

    <div>
        sex:
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <input type="radio" name="sex">不详
    </div>
    <select name="" id="">

        <option value="1">大狗</option>
        <option value="2">二狗</option>
        <option value="3">三狗</option>
        <option value="4">四狗</option>

    </select>
    操作:
    找到可以用的标签 -- $(':enabled')
    找select标签被选中的option标签  $(':selected')

4.2.3 jquery的筛选器方法

//找兄弟
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

//找弟弟
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") //直到找到id为i2的标签就结束查找，不包含它

//找哥哥(找的顺序是从下往上的)
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")


//找祖辈
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

//找儿子
$("#id").children();// 儿子们

//过滤
$("div").first() // 获取匹配的第一个元素
$("div").last() // 获取匹配的最后一个元素
$("div").eq(n) // 索引值等于指定值的元素，n是索引
$("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素
$("div").find("p") //后代选择器，在所有div标签中找后代的p标签
$("div").filter(".c1")  // 交集选择器，从结果集中过滤出有c1样式类的
$("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一个span标签</span>
                <span>我是第二个span标签</span>
                <span>我是第三个span标签</span>
            </p>
            <button>按钮</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">

        //获取第n个元素 数值从0开始
        $('span').eq(1).css('color','#FF0000');

        //获取第一个元素 :first :last    点语法  ：get方法 和set方法
        $('span').last().css('color','greenyellow');
        $('span').first().css('color','greenyellow');

        //查找span标签的父元素（亲的）
$('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});

        //选择所有的兄弟元素（不包括自己）
        $('.list').siblings('li').css('color','red');

         //查找所有的后代元素
         $('div').find('button').css('background','yellow');

         //不写参数代表获取所有子元素。
          $('ul').children().css("background", "green");
          $('ul').children("li").css("margin-top", 10);

    </script>
</html>

5. 链式表达式

<ul>
    <li>大狗</li>
    <li>二狗</li>
    <li class="c1">三狗</li>
    <li>四狗</li>
    <li>五狗</li>
    <li class="c2">六狗</li>
    <li>七狗</li>
</ul>

操作      $('li:first').next().css('color','green').next().css('color','red');

6.操作标签

6.1 样式操作

样式类操作
    addClass();// 添加指定的CSS类名。
    removeClass();// 移除指定的CSS类名。
    hasClass();// 判断样式存不存在
    toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

示例代码

<style>
    .c1 {
         height: 208px;
         width: 208px; :
         border- radius: 50%;
         background-color: red;
}
    .green {
         background-color: green;
</style>
</head>
<body>
I
<div class="c1"></div>
<script src="jquery. js" ></script>
</ body>

》$(".c1").hasClass('c1')
true
》$(".c1").hasClass('green')
false
》$(".c1").addClass('green')
jQuery,fn. init [div.cl.green, prevobj(1)]
》$(".c1").removeClass('green')
jQuery.fn. init laiy.c1prevobject: j
》$(".c1").toggleCass( ' green')
jQuery. fn. init [div.c1. green, prevobj(1)]
》$(".c1").toggleclass("green')
jQuery.fn. init [div.c1, prevbfect: f
》$(".c1").toggleClass"green )

6.2 css操作

单个方式:$('div').css('background-color','green');
多个方式:$('div').css({'background-color':'yellow','width':'400px'});

6.3 位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置

 .offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离

示例代码

    $('.c2').offset(); 查看位置
    $('.c2').offset({top:100,left:200}); 设置位置

    代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            /*body{*/
            /*    margin: 0;*/
            /*}*/
            .c1{
                background-color: red;
                height: 100px;
                width: 100px;
                display: inline-block;

            }
            .c2{
                background-color: green;
                height: 100px;
                width: 100px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
    <div class="cc">
        <div class="c1"></div><div class="c2"></div>
    </div>
    <script src="jquey.js"></script>
    </body>
    </html>
$(window).scrollTop()  //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向右移动的距离

6.4 尺寸

height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()

示例操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            .c1{
                width: 100px;
                height: 100px;
                padding: 20px 30px;
                border: 2px solid red;

            }
        </style>
    </head>

    <body>
    <div class="c1"></div>
    </body>
    <script src="jquery.js"></script>
    </html>

    操作:
        $('.c1').height();
        $('.c1').width();
        $('.c1').innerWidth();
        $('.c1').outerWidth();

6.5 文本操作

html()// 取得第一个匹配元素的html内容，包含标签内容
html(val)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例:
    取值
        $('.c1').html();
        $('.c1').text();
    设置值
        $('.c1').text('<a href="">百度</a>');
        $('.c1').html('<a href="">百度</a>');

原文地址：https://www.cnblogs.com/liubing8/p/11553160.html

时间： 2024-10-10 16:26:24

前端07 /jQuery初识的相关文章

jQuery之前端国际化jQuery.i18n.properties

jQuery之前端国际化jQuery.i18n.properties jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的最后一个字母.jQuery.i18n.properties采用.properties文件对JavaScript进行国际化.jQuery.i18n.proper

前端技术Jquery与Ajax使用总结

前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但是为了加深自己的记忆,还是总结一下下,有什么不对的地方欢迎大家指出~ 准备工作 由于我是使用的bootstrap,所以有些操作也是基于它来进行的,比如说模态框什么的,有关bootstrap的相关知识可以到这里去学习.然后这个项目用的是Struts框架.好了,基本情况就是酱紫了. 将jquery的包以

前端学习——JQuery Ajax使用经验

0.前言 在项目推进过程中经常使用Ajax,通过Jquery提供的函数可以非常方便的使用Ajax,但是在实际使用中也遇到一些问题,例如如何防止浏览器使用缓存,如何使用同步方式等.通过博文整理总结希望自身有所提高. 在这里通过一个加法例子说明问题.为了突出ajax,前端网页和后端PHP程序尽可能的简单. [前端]--add.html 图1 add页面 [后端]--add.php <?php // 返回JSON格式 header('Content-Type:application/json;char

前端：jQuery笔记

前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收到服务器发送的AJAX请求,服务器端并不返回,而是将其Hold住,待到有东西要通知客户端时,才将这个请求返回. 客户端:请求异步Action,当接收到一个返回时,立即又再发送一个. 缺点:会长期占用一个Asp...阅读全文 posted @ 2015-02-10 12:01 逆心 阅读(1072)

@java--liang 这是一款HTML5的前端视频Jquery组件，里面有41个播放器Demo。

原文:@java--liang 这是一款HTML5的前端视频Jquery组件,里面有41个播放器Demo. 源代码下载地址:http://www.zuidaima.com/share/1550463527406592.htm 支持播放格式:MP3,M4A / M4V,OGA / OGV,WEBMA / WEBMV,WAV,FLA / FLV,RTMPA / RTMPV 如果有使用上的不明白的可以QQ交流,或者留言给我,第一时间回复. 早上看到你的留言,希望能帮你度过这个星期,不至于完蛋,@jav

前端之jQuery

前端之jQuery jQuery入门 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库: 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.    它的宗旨就是:“Write less, do more.“ jQuery包含以下内容 选器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each.data.Ajax(下载链接:https://jqu

前端09 /jQuery标签操作、事件、补充

目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文档标签操作 2.1值操作 2.2插入标签 2.3 删除标签 remove.detach和empty 2.4 (替换)修改标签 replaceWith和replaceAll 2.5 克隆标签 clone 3.属性操作 3.1 attr() 设置属性值.者获取属性值 3.2 removeAttr() 移除属性 3.3 prop() 4.class类

前端学习---jquery

本部分主要记录jquery的  '选择器'  'dom操作'  'ajax': 1:'语法': jquery的基本语法:$(selector).action() $符号:定义jquery    selector:选择器,用于查找html元素   action() 方法:对元素的操作 如:$('p').hide():隐藏所有<p>标签 说明:文档加载就绪的函数 实际的项目中所有的jquery函数都位于 document ready 函数中:这是一个文档加载就绪的函数,为了防止文档在加载就绪 之前

JavaWeb前端：JQuery

Jquery基本概念 什么是Jquery Jquery是一个开源的,集成了Javascript,CSS,DOM,AJAX的前端框架:它诞生于2006年,最初是为了简化JavaScript开发而产生的,随着越来越多的开发者参与,JQuery逐渐演化成了一个易于开发,具有很多功能的前端框架. JQuery和普通的JavaScript比起来最大的优点就是使用方便,能有效的提高开发效率:其次JQuery考虑了不同浏览器的兼容性问题,具有很好的兼容性,使得开发者从浏览器兼容性的问题中解放出来. 除了JQu