javaWeb - Java学习十四——jQuery - 《JavaStudy 学习》

jQuery

jQuery也就是JavaScript与查询（query），它就是辅助JavaScript的js库。

jQuery中$是一个函数，$()就是调用这个函数

jquery文本就绪函数的执行顺序是要先于原生js文本就绪函数的

$(function(){
//1、通过jQuery选择dom对象
//2、调用单击事件对应的方法进行绑定
$("#id").click(function(){
    alert("jquery 绑定单击事件")
})})

传入参数为【函数】时，表示页面加载完成之后。相当于window.onload = function(){}

传入参数为【html字符串】时：会为我们创建这个html标签对象

传入参数为【dom对象】时：会把这个dom对象转换为jQuery对象

jQuery对象和dom对象区分
Dom对象
1.通过getElementByld()查询出来的标签对象是 Dom 对象
2.通过getElementsByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement()方法创建的对象，是Dom对象
jQuery对象
1.通过JQuery提供的API创建的对象，是JQuery对象
2.通过JQuery包装的Dom对象，也是JQuery对象
3.通过JQuery提供的API查询到的对象，是JQuery对象

jquery对象的本质：jquery对象本质可以看成是一个包含一个 dom数组和所有Jquery方法的容器

jquery对象不能使用dom对象的属性和方法
dom对象不能使用jquery对象的属性和方法。
每当我们调用选择器方法查找dom树里的元素时，其实就是把找到的dom元素存入一个JQ对象里的dom数组中，然后再把这个JQ对象返回。
当我们调用Jquery方法时（如 html()），jq方法会遍历内部 dom数组，并调用每个dom元素的对应的dom属性或方法（如innerHTML），完成操作。
其中Jq方法遍历内部dom数组的过程就叫做【隐式迭代】。

jQuery选择器
基本选择器
#ID选择器:根据id查找标签对象
.class选择器:根据class查找标签对象
element 选择器:根据标签名查找标签对象
*选择器:表示任意的,所有的元素
selector1，selector2组合选择器:合并选择器1，选择器2的结果并返回

<script>
    //通过jquery动态绑定文本就绪函数
    $(function (){
    //id选择器
     var $id = $("#jy");
    //.class选择器
    var $jy = $(".jy")
    //element选择器
    var $input = $("input")
    })
</script>
<input id="jy" type="checkbox" class="jy" value="1">

属性过滤器

//写法
var $check = $("[type='checkbox']")

例：需求是获取所有被选中的多选框
写法一：分开写

//1、先获取所有多选框
var $check = $("[type='checkbox']");
//2、获取被选中状态的多选框
$check.each(function(){
    if(this.checked = true){
    alert(this)
    }
    })

写法二：使用组合选择器

var $check = $("[type='checkbox']:checked").each(function(){
    alert($(this))
})
或者
//冒号后跟过滤条件可以无限使用
var $check = $(:checkbox:checked").each(function(){
    alert($(this))
})

jQuery的属性操作
html()它可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样。
text()它可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText 一样。
val()它可以设置和获取表单项的value属性值，跟dom属性value一样
attr()可以设置和获取属性的值
prop()可以设置和获取属性的值

<script>
    //通过jquery动态绑定文本就绪函数
    $(function (){
        //获取起始标签和结束标签中的内容
       var $div = $("#div");
       alert($div.html())//获取所有内容
       $div.html("赋值")//设置内容
       alert($div.text())//获取文本
       $div.text("赋值")//设置内容
        //让多选框value=4的多选框被选中
        //attr()与prop()使用方法相同
        $("[value = '4']").prop("checked",true);
    })
</script>
<div id="div"></div>

插入标签：

 //在html页面插入标签
        $("body").append("<div id='div'>nfasdfalsdf;lja</div>")
        //删除div标签
        $("#div").remove()