【第一章】 jQuery入门---选择器 and $工具属性CSS

jQuery1:入门知识--选择器

3W1H
   What?是什么？
       JavaScript库：封装了很多JS代码
       JavaScript库：jQuery(90%)、Ext JS
       官方地址：http://jquery.com/
   Why?为什么要学习？
       查看官方jQueryLOGO：write less，do more
       为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
   Where?哪些情况下用？
       中大型网站开发
       一些前端框架的基础，比如EasyUI
   How?怎么用？
       工具：HBuilder
       使用jQuery步骤
           1.下载jQuery库
               开发版本：jquery-3.3.1.js
               生产版本：jquery-3.3.1.min.js
           2.引入：将js文件复制到项目中
           3.使用

jQuery选择器
   基本选择器
       常用选择器：
       ID选择器：#ID
       类选择器：.class
       元素选择器:element
       通配符：*
       多个选择器(并集)：selector1，selector2(用逗号隔开)
       多个选择器(交集)：selector1selector2
   层次选择器
       查找所有元素，查询子元素
   过滤选择器
       参考jQuery文档
       获取第一个元素:first
       最后一个元素:last
       获取奇数元素:even
       获取偶数元素:odd
       获取某一范围元素
           :gt大于
           :lt小于
   表单选择器
       参考jQuery文档
       获取选择单选框的值
       获取选择多选框的值
       获取选择下拉值

 //设置样式的语法:元素.css("样式属性","值");//ID选择器$("#one").css("background","green");$("#one").css("color","yellow");//设置背景色红,字体为绿//$("#one").css({"background":"red","color":"pink"});//类选择器//$(".two").css("background","yellow");//标签选择器//$("div").css("background","pink");//通配符//$("*").css("background","green");//并集//$("p,span").css("background","yellow");//交集//$("p span").css("color","yellow");//$("p>span").css("color","yellow");//过滤选择器var lis =$("li");//lis.first().css("color","yellow");//第一个lis.even().css("color","red");//奇数//lis.odd().css("color","blue");//偶数//lis.eq(-5).css("color","gray");//据下标查行//$("li:gt(3)").css("color","pink");//大于//$("li:lt(2)").css("color","pink");//小于//第二行到第四行   2<x<4//$("li:gt(0):lt(3)").css("color","pink");//$("li:lt(4):gt(0)").css("color","pink");

jQuery2：$工具&属性&CSS

$指的是：JavaScript

$工具方法:
   查看jQuery官方API文档【工具】
   1.$.each()：遍历数组、对象、对象数组中的数据
   2.$.trim()：去除字符串两边的空格
   3.$.type(obj)：得到数据的类型
   4.$.isArray(obj)：判断是否是数组
   5.$.isFunction(obj)：判断是否是函数
   6.$.parseJSON(obj)：解析json字符串转换为js对象/数组

$(function() {//console.info("春花秋月何时了");//控制台显示（Fn+F12）//定义数组var names = ["魏无羡", "蓝湛", "江澄"];//遍历数组$.each(names, function(i, names) {console.info(i, names);})console.info("-----------------------");//定义对象  中括号定义数组, 大括号定义对象var stu = {"name": "魏婴","age": 300,"sex": "男"};$.each(stu, function(k, v) {console.info(k, v);})//定义对象集合var stu = [{"name": "魏婴","age": 300,"sex": "男"},{"name": "蓝湛","age": 300,"sex": "男"},{"name": "温宁","age": 300,"sex": "男"}];//遍历对象集合$.each(stu, function(i, stu) {//console.info(stu);//1、遍历集合中的 每一个对象$.each(stu, function(k, v) {console.info(k, v);})})//2、直接对象点属性//console.info(stu.name,stu.age,stu.sex);})//$.trim() 去除两边的空格var str = "  hope  sum    ";//console.info($.trim(str));//console.info("长度："+str.length);//console.info("去空格之后的长度:"+$.trim(str).length);//type 判断数据类型var str = "china";var age = 18;//console.info($.type(str));//$.isarray(); 判断是否是数组//var x = "ssdlh";//console.info($.isArray(x));//var y = ["玫瑰","荷花","向日葵"];//console.info($.isArray(y));//$.isFunction();  判断是否是函数//console.info($.isFunction(sleep));//console.info($.isFunction(str));//$.parseJSON(json); 把JSON字符串转换为对象// var jsonStr = '{"name":"魏婴","age":300,"sex":"男"}';// var stu = $.parseJSON(jsonStr);// $.each(stu,function(k,v){//  console.info(k,v);// })//把JSON数组字符串转换为对象数组// var jsonStu ='[{"name":"魏婴","age":300,"sex":"男"},{"name":"蓝湛","age":300,"sex":"男"}, {"name":"温宁","age":300,"sex":"男"}]';// var stu = $.parseJSON(jsonStu);// $.each(stu, function(i, stu) {//    console.info(stu.name, stu.age, stu.sex);// })

jQuery属性和CSS
   属性
       查看jQuery官方API文档【属性】
       1.attr()：获取某个标签属性的值，或设置某个标签属性的值
       2.removeAttr()：删除某个标签属性
       3.addClass()：给某个标签添加class属性值
       4.removeClass():删除某个标签class属性值
       5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
       6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
       7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
       8.val()：主要用户获取/设置输入框的值

   CSS
       查看jQuery官方API文档【CSS】
       1.css()：设置标签的css样式
           获取样式值：css("样式名")
           设置单个样式：css("样式名","样式值")
           设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})

       2.位置
           offset()：相对整个大容器的相对位置
           position()：相对父容器的相对位置
           案例6：大Div中嵌套小Div，求两个div相对位置
           scrollXX
               scrollTop()：滚动条到顶部距离

       3.尺寸
           width():容器宽
           height():容器高
           innerWidth()：width+padding
           innerHeight()：height+padding
           outerWidth():width+padding+border
           outerHeight():height+padding+border

【第一章】 jQuery入门---选择器 and $工具属性CSS相关推荐

jQUery第一课（入门选择器）
思维导图一.笔记: 1. jQuery是什么?jQuery是一个快速.简洁的JavaScript框架. ...
微信小程序零基础入门_第一章小程序和开发者工具的介绍
第一章小程序和开发者工具的基本介绍 1.1 小程序的开发工具微信小程序的开发者需要先通过微信公众平台注册开发者账号.在微信公众平台网页中的账号分类->小程序中有着较为详细的注册介绍,可以较为 ...
Java Persistence with MyBatis 3(中文版) 第一章 MyBatis入门
本章将涵盖以下话题: ž MyBatis是什么? ž 为什么选择MyBatis? ž MyBatis安装配置 ž 域模型样例 1.1 MyBatis是什么 MyBatis是一个简化和实现了Ja ...
【MyBatis-Plus】第一章快速入门
第一章快速入门文章目录第一章快速入门一.介绍 1.概述 2.特性二.入门案例 1.安装插件 2.准备工作 3.MyBatis-Puls 替换 MyBatis 4.修改 StudentDao ...
第一章_Android入门
第一章_Android入门 1.Android开发环境的搭建安卓的开发环境有两种 1)Android Studio 优点:是专业的安卓开发软件.缺点:电脑要求的配置很高,对于初学者,可能你要一直在调 ...
Java 学习笔记：第一章 Java入门
Java 学习笔记:第一章 Java入门 1.1 计算机语言发展史以及未来方向 1.2 常见编程语言介绍 C语言 C++ 语言 Java语言 PHP 语言 Object-C和Swift 语言 Java ...
Android项目驱动式开发教程第2版,《Android项目驱动式开发教程》第一章开发入门.ppt...
<Android项目驱动式开发教程>第一章开发入门 1.4 项目框架分析 4 android:versionName="1.0" > 5 8 第9行代码andro ...
【MyBatis】第一章快速入门
第一章快速入门文章目录第一章快速入门一.介绍 1.使用 JDBC 的缺陷 2.MyBatis 框架解决的主要问题二.入门案例 1.准备数据库 2.创建实体类 3.创建持久层 DAO 接口 ...
jQuery$工具属性CSS
jQuery$工具&属性&CSS $工具方法: jQuery属性: CSS: $工具方法: 1.$each(Object,Function):遍历数组.对象.对象数组中的数据 2.$t ...

【第一章】 jQuery入门---选择器 and $工具属性CSS

jQuery1:入门知识--选择器

jQuery2：$工具&属性&CSS

【第一章】 jQuery入门---选择器 and $工具属性CSS相关推荐

最新文章

热门文章