jQuery

简介

• jQuery是一个优秀的JavaScript框架
• jQuery是开源免费的
• jQuery是轻量级的JS库,兼容各种浏览器

JQuery能干什么?

jQuery 使用户能更方便地处理 HTML,events、实现动画效果， 并且方便地为网站提供 AJAX 交互.jQuery语法设计让开发者更简便,可以用于事件处理,处理AJAX等

DOM对象与jQuery对象理解

DOM与jQuery对象表现形式不一样,可以互转

<button id="btn">切换</button>
//DOM对象
var  btn=document.getElementById("btn");
//jquery对象
var $btn=$('#btn');

DOM对象-->jquery对象
$(btn);   //常用 $其实就是jquery
jquery对象--->DOM对象
$btn.get(0);

jQuery选择器

jQuery 提供获取页面元素一种语法,使用选择器获取元素的语法:

注意:如果通过 jQuery 方法获取页面中元素，没有查找到，返回值不是 null，返回值为一个空数组 []，所以判断是否获取到元素，通过 jQuery.size() != 0 来判断

${"选择器"}  注: $ 代表的其实代表就是一个jQuery函数
var jQuery=function(){
    
}
var $=jQuery;
$('#btn') //找页面元素
$(btn) //DOM对象 ->jquery对象
$(匿名函数) //页面加载完
上面写法其实都是调用函数,只是调用的时候传递时不同类型的参数而已,底层会根据参数实际类型,做不用处理

基本选择器

基本选择器其实就是通过id ,class 或者标签等查找元素

• id选择器

#id : $('#btn') : 选择找到html中 id="btn"   每个id名称只能使用一次 [0,1]

• 元素选择器

Element: $('div') :获取所有div元素

• 类选择器

. : $('.myClass') :获取所有class="myClass"的元素或者元素组

注意: ,(逗号) 相当于或 ,连着写没有空格就是且

层次选择器

• ancestor descendant(祖先后代选择器)

$'form input') :获取所有 form 下的所有 input 元素 (包括了父标签,祖父标签,祖祖父标签都可以哦)

• parent > child(父子选择器)

$('form > input'):获取在form父元素下的,所有子元素是input的元素

• prev + next(相亲相爱兄弟选择器)

$('label + input') :匹配所有紧接在 prev 元素后的 next 元素。

• prev ~ siblings(兄弟选择器)

$('form ~ input'):匹配 prev 元素之后的所有 siblings 元素

过滤选择器

通过特定的过滤规则来筛选所需要的DOM元素,一般以冒号(😃 开头,可以分为基本过滤,内容过滤,可见性过滤,属性过滤,表单对象属性过滤等

<input type="hidden" name="id" value="1">
<select>
    <option value="1">Flowers</option>
    <option value="2" selected>Gardens</option>
    <option value="3">Trees</option>
</select>

<script>
        $(function () {
            //获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加,id 属性，再通过 id 选择器找
            console.log($('[name=id]').val());
            //获取选中的 option
            console.log($('option:selected').val());
        })
    </script>

jQuery事件绑定

• jQuery对象.事件方法名(匿名函数) //在匿名函数体中,this是一个DOM对象,转成jquery对象 $(this)
• 常见的事件方法名 click change blur 等等

jQuery常用DOM操作的方法

• append() :给元素添加子元素，且是最小的子元素
• after() : 给元素添加弟弟元素
• empty():断子绝孙,删除所有子节点
• remove() :删除节点,remove方法会返回被删除的元素
• detach():也是删除detach对remove会保留元素事件处理

jQuery元素属性操作的方法

关于方法的选择

1. 针对value属性,使用val()
2. 针对class属性,使用addClass,removeClass,toggleClass(轮换css),hasClass(判断css)等
3. 针对style属性,使用css
4. 针对checked selected属性,使用prop
5. 针对data- 开头的属性,使用data
6. 其他属性,使用attr(通用的方法)

• css

  jQuery对象.css('样式名','样式值') //针对style属性

• val

jQuery对象.val([值]) //有值就是设置,无值就是获取

• addClass

jQuery对象.addClass('class属性值')

• removeClass

jQuery对象.removeClass('class属性值')

• prop

jQuery对象.prop('checked | selected'[, true|false]) //针对checked selected属性 有值就是设置,无值就是获取

• data

jQuery对象.data('没有data-开头属性名') //针对 data-开头属性,写参数不要data-

• attr

jQuery对象.attr('属性名'[, 属性值]) //针对其他属性,有值就是设置,无值就是获取

• html | text

  jQuery对象.html(['值']) //针对元素中间的非文本内容(带标签内容)
  jQuery.对象.text(['值']) //针对元素中间的纯文本内容 ,有值就是设置,无值就是获取

• each

jQuery.对象.each(匿名函数)//遍历jQuery对象,注意匿名函数中实参怎么获取 arguments

• inArray

$.inArray(值,数组) //若值存在数组中,返回对应索引值,否则返回-1