jQuery入门

jQuery介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery文件说明:

　　Jquery.js 未压缩, 开发,学习阶段,推荐使用

　　 Jquery.min.js 压缩: 没有换行,没有格式代码. 取名最简化, 项目上线,(生产环境) 推荐使用, 节省网络带宽

jQuery的语法格式:

　　 $(选择器).action();

　　工厂函数$()：将DOM对象(原生js对象)转化为jQuery对象

　　选择器 selector：获取需要操作的DOM 元素

　　方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

注意: jquery对象与js对象不能混合使用, jquery对象只能调用jquery的函数, js对象只能调用js的函数

Jquery对象与js对象的转换:

js对象转换为jquery对象: $(js对象) --> jquery对象
jQuery对象转换为js对象: jquery对象是一个集合

- jQuery对象[0] --> js对象
- jQuery对象.get(0) -->js对象

Jquery代码特点:

链式写法, jquery大部分的函数,返回值都是jquery对象
隐式迭代

　　　　　　$(“tr:odd”) 获取下标为奇数的tr集合, jquery对象类似集合对象

　　　　　　隐式遍历了$(“tr:odd”) 获取下标为奇数的tr的集合, 获取每个tr对象,添加css样式

　　 3. $就是jquery对象, $ === jQuery , 在有的前端框架,也是使用$, 这个页面既使用呢jquery, 又使用另外使用$的框架, 此时.调用jquery的函数, 使用jQuery调用

Js的加载事件与jquery的加载事件的区别:

　　　　写法：$(document).ready(function(){ // 在这里写你的代码... })

　　1) 加载事件绑定多次, js的写法: 后面的覆盖前面的, jquery写法: 可以绑定多次

　　2) Js的写法不能简写的, jquery的写法可以简写, 简写如下:

　　　　$(function(){ // 在这里写你的代码... }); 推荐

　　3) 执行的时机:

　　　 js的写法: 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行

　　　　jQuery的写法: 只需要等DOM文档结构加载完成,就执行,不需要等(图片,视频,...)加载完成

样式操作：

样式类

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
例：
$("#box").addClass("red");

css

1、一个样式一个样式的设置   css(样式属性名,值)
    $("#box").css("height","300px");
                   .css("background-color","red")
2、一次性设置多个样式   
            /* css({
                  属性名:值,
                  属性名2:值2,
                  属性名3:值3,
                  ....
                 })*/
$("#box").css({
    height:"300px",
    "background-color":"green",
    "color":"yellow"
});

文本操作

html() 获取/设置开始标签到结束标签之间的所有的内容(包括标签)
text() 获取/设置开始标签到结束标签之间的所有的文本(不包括标签)
val()  获取/设置表单元素的value属性值 等同于js的value属性

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checked,selected,disabled 属性，推荐使用 prop() 除这个三个之外,推荐使用 attr()

prop和attr的区别：

　　attr全称attribute(属性)

　　prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性。

全选例题：

//全选
        $("#all").click(function(){
        //让商品前面的checkbox的checked值与全选的checked一样
        //获取标签的属性  attr()   prop()
        //alert($(this).prop("checked"));
        $(this).prop("checked","true")
        $("input[name=product]").prop("checked",$(this).prop("checked"));
 });

posted @ 2020-04-06 21:01 64Byte 阅读(149) 评论(0) 编辑收藏举报

刷新页面返回顶部

64Byte