Java Jquery

一.什么是Jquery

 jQuery的本质就是JavaScript

  只是将JavaScript的某些方法封装成一个库，

极大简化了原生JavaScript开发。

二.Jquery的优势

1.轻量级，jquery库的大小仅仅几十kb

                

2.强大的选择器

用更精简的代码即可获取指定的html元素，

摈弃了之前通过document.getElement等方法，并支持批量操作元素

                

 3.浏览器的兼容性，能兼容大部分市面上的浏览器

三.如何引用

1.下载jquery的js文件 但是Hbuiler内置了如何操作：

                    A.选中js文件夹

                    B.右键创建一个js文件

                    C.在下方选中jquery1.x 然后重命名即可

                    D.不要去动里面的代码

            

                2.在script标签中引入刚刚下载的jquery文件

                    <script src="js/jquery.js"></script>

                

                3.设置语法提示库

                    右下角 选择jquery xxx

                

                

                4.测试

                通过alert($) ; 如何正确弹窗就说明OK了 反之失败

                

                

                凡是在控制台看到了这一行代码：$ is not defined

                就表示Jquery没有引入成功

五.jquery的常见方法

注意: js对象无法使用Juqery的相关用法 Juqery对象也无法使用JS的相关用法

            

 Jquery中常见方法如下:

val()    text()    html()    css()    attr()    prop()

------------------------------------------------------------------------------------------------------

 注意事项: js的value是属性 jquery的val是方法      

val使用场景:只能修改表单元素 且拥有value值的组件

例如文本框密码框 但是像h1标签 span标签就无法使用该方法         

val的2种用法:

1.取值:

var str = $("input").val();

 alert(str);

2.赋值

$("input").val("~~~");

-----------------------------------------------------------------------------------------------

注意事项: js的innerText是属性 jquery的text是方法

text使用场景:只能修改非表单元素

例如h1标签 span标签 但是像文本框密码框就无法使用该方法     

text的2种用法:

1.取值:

var str = $("h3").text();

 alert(str);

2.赋值

 $("h3").text("!!!");

----------------------------------------------------------------------------------------------

注意事项: js的innerHtml是属性 jquery的html是方法

html使用场景:只能修改非表单元素

例如h1标签 span标签 但是像文本框密码框就无法使用该方法

html和text的区别是:前者会将html标签识别 后者只会解析成文本

html的2种用法:

1.取值:

var str = $("h3").html();

alert(str);

2.赋值

$("h3").html("!!!");

            

----------------------------------------------------------------------------------------------

注意事项: js的style.xxx是属性 jquery的css是方法

css使用场景:修改或获取HTML元素的CSS的样式

            

css的2种用法:

1.取值:

var str = $("p").css("color");

alert(str);

2.赋值

$("p").css("color" , "yellow");

----------------------------------------------------------------------------------------------

            

attr使用场景:修改或获取HTML元素的属性 该属性的值 不为true或false

常见的属性A类(等于一个具体的值):id class name type src href

            

attr的2种用法:

1.取值:

var str = $("input").attr("id");

alert(str);

2.赋值

$("input").attr("id" , "aaa");        

 $("button").attr("disabled","disabled");//没问题

但是你会发现 无法通过attr将其修改为 可以使用

         

 ----------------------------------------------------------------------------------------------

prop使用场景:修改或获取HTML元素的属性 该属性的值 为true或false

常见的属性B类(等于一个true或false):disable readonly checked

var str = $("button").prop("disabled");

alert(str);

   $("button").prop("disabled",false);

六.js对象和jquery对象

1. jquery对象：

$(“xxx”)函数会返回一个对象，这个对象被称为jQuery对象

例如刚刚所学习的css(),html()等都是jQuery对象的专属方

2. dom对象：

就是JS通过document对象获取的对象

例如document.getElementById();

js对象无法使用Juqery的相关用法 Juqery对象也无法使用JS的相关用法

3. js对象和jquery对象的区别:

dom对象和jQuery对象进行一些操作的对比：

a. 原生JavaScript都是通过更改属性来实现

b. jQuery对象都是通过调用方法来实现

 c. JavaScript是单独操作--如需批量操作需要借助for循环

d. jQuery是批量操作--如需单独设置，就确保其只有一个元素