jQuery 简介

Posted 2020-07-27 雍家培

jquery可以说是js的封装，大多数情况下jquery比js简单，它们两个可以相互写对方的里面，使用jquery需要导入jquery文件。

<script src="jquery-1.1.min.js"></script>

jquery文件名格式为，jquery-版本号[.min] .js    其中min表示压缩版

 

jquery与js相似，所以他们的操作基本一一对应，只是方式不同：

主要操作有：

找对象：通过id、name、className、TagName找对象

操作对象：操作属性：取值，赋值，删除

                 操作样式：获取样式，设置样式

                 操作内容：

                                表单元素：获取内容，添加内容

                                非表单元素：获取内容，添加内容

                 操作元素：添加子元素、删除元素

添加事件：添加绑定事件、解除绑定事件

 

一一对应：

html页面

<div id="one"><span>one</span></div>

<div class="test" bs="aa">two</div>

<div class="test">three</div>

<div class="test">four</div>

<input type="text" name="uid" bs="aa" id="uid" />

<input type="button" id="btn" value="取消绑定" />

<input type="button" id="add" value="绑定事件" />

 

Jquery代码：都写在script里面

<script type = "text/javascript">

//$在jquery中专门用来做选择，相当于选择器，括号里面是根据什么来选，后面点事件

//这里的意思是说，给当前页面加了一个事件是加载完成，就是当前页面加载完成后执行里面的function（匿名函数）

$(document).ready(function(e){       

        //Jquery与js找对象

        //JS通过id、name、className、TagName找对象

        var a = document.getElementById("one");                //id

        var b = document.getElementsByClassName("test");//classname

        var d = document.getElementsByTagName("div");    //tagname

        var c = document.getElementsByName("uid");          //name

        //JQUERY通过id、name、className、TagName找对象

        var aj = $("#one");                 //id

        var bj = $(".test");                    //classname

        var cj = $("div");                        //tagname

        var dj = $("[name=‘uid‘]");    //name注意中括号，特别注意属性可以自己定义例如：bb="aa"

        var ej = $("div.test");                //div中class为test的元素，Jquery可以使用选择器找对象。。。

==========================================================================

        //Jquery与js操作对象

==========================================================================

        //JS操作属性：

        a.setAttribute("","");            //设置属性，修改属性

        a.remove("");                        //移除属性

        a.getAttribute("");                //获取属性

        //JQUERY操作属性

        aj.attr("","");                          //设置属性，修改属性

        aj.removeAttr("");                //移除属性

        aj.attr("");                              //获取属性

==========================================================================

        //JS操作内容

        a.innerText;                   //非表单元素的取值，赋值是：a.innerText = "aaaa";             

        a.innerHTML;                //非表单元素的取值，赋值是：a.innerHTML = "<a>123</a>";  可以解析html标签

        a.value;                         //表单元素的取值，赋值是：a.value = "aaaa";

        //JQUERY操作内容

        aj.text();                        //非表单元素的取值，赋值是：aj.text("aaaa");

        aj.html();                       //非标单元素的取值，赋值是：aj.html("<a>123</a>");    可以解析html标签

        aj.val();                         //标签元素的取值，赋值是：aj.val("aaaa");

==========================================================================

        //JS操作样式

        a.style.backgroundColor = red;    //设置样式

        a.style.color;                                    //获取样式，只能获取内联样式，也就是写在标签里面的样式

        //JQUERY操作样式

        aj.css("color","yellow");                                    //设置样式

        aj.css("color");                                        //可以获取到内嵌式的样式属性

==========================================================================

          //JS操作元素，创建元素两种方式

          //第一种用html赋值来创建元素

            var s = "<input type=‘button‘ value=‘"+i+"‘ class=‘bbb‘ onclick=‘doselect(this)‘>"

            var dd = document.getElementById("test");

            dd.innerHTML += s;

            //第二种是使用createElement

            var ab = document.createElement("input");

            ab.setAttribute("type","button");

            ab.setAttribute("value",i);

            ab.setAttribute("class","bbb");

            ab.setAttribute("onclick","doselect(this)");

 

            var dd = document.getElementById("test");

            dd.appendChild(ab);

            //删除元素

            var dd = document.getElementById("test");

            dd.remove;

             //JQUERY操作元素,创建元素             

            var str = "<div id=‘a‘ style=‘width:100px; height:100px; background-color:red‘></div>";         

            div.append(str);

            //删除元素

            $("#a").remove();

==========================================================================

            //JQUERY中的事件

            $(".test").click(function(){

                    alert($(this).text());

                });

 

            $(".test").bind("click",function(){                //绑定事件，注意可以同时绑定多个

                    alert($(this).text());

                });

 

            $("#btn").click(function(){

                    $(".test").unbind("click");                    //解除绑定事件

            });

           $("#add").click(function(){

                    $(".test").bind("click",function(){

                    alert($(this).text());

 

                    });

            });

});

 

</script>