| 一、今日学习 1.什么是jQuery？ jQuery是一个快速的，小巧的，功能丰富的js库 jQuery文件中暴露了一个对象给window---$ 学习jQuery就是学习里面的属性和方法 1.1特点 1.独特的选择器 2.链式的DOM操作 3.事件绑定机制 4.出色的浏览器兼容性 5.封装完善的Ajax请求 2.jQuery的选择器【重点】 匹配模式、匹配规则 作用：查找元素 语法： $('选择器') jQuery('选择器') $===jQuery 1.基本选择器 id选择器=== $('#id') class选择器===$('.class') 标签选择器===$('标签名') 2.层级选择器 子代选择器 后代选择器 兄弟选择器值得下一个兄弟 兄弟选择器值后面的所有兄弟 3.过滤选择器 第一个 最后一个 第几个 除自己之外的所有同级兄弟元素 3.jQuery对象与原生对象 $('选择器') duncument.querySelector('选择器') 相互转换 jq对象转为原生对象：jq对象[0] jq对象.get(0) 原生对象转jq对象：原生对象---$(原生对象) jq对象只能使用jq的方法 原生对象只能使用原生的方法 $(this)---jq对象 this---原生对象 4.操作class 1.添加类名 jq对象.addClass('类名 类名 ..') 2.删除类名 jq对象.removeClass()---删除所有 jq对象.removeClass('类名')---删除指定类名 3.判断 jq对象.hasClass('类名')---判断是否含有---布尔值 4.切换 jq对象.toggleClass('类名')---有就删除，没有就添加 5.操作样式【重点】 1.获取 jq对象.css('样式名') 2.设置 jq对象.css('属性名','属性值') jq对象.css({ 'key':'value', 'key1':'value', }) 6.操作属性 1.自定义属性 jq对象.attr('属性名') jq对象.attr('属性名','属性值') jq对象.attr({ 'key':'value', 'KEY1':'value', }) 2.标准属性 jq对象.prop('属性名') jq对象.prop('属性名','属性值') jq对象.prop({ 'key':'value', 'KEY1':'value', }) 7.操作文本 1.操作纯文本 text()---textContent/innerText 2.解析标签 html()---innerHTML 3.表单标签 val()---value 8.入口函数 1.$(function(){ js代码 }) 2.$(document).ready(function(){ js代码 }) 如果是在头部进行外部引入js，需在js文件内声明入口函数，否则无法操作dom |
| 欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) | Powered by Discuz! X3.4 |