jquery设置html的一些常用例子

1、设置style：

$(".classname").css("background-image", "url(./images/a1.jpg)");

2、插入元素或者清空

$(".classname").empty();//清空$(".classname")内部
$(".classname").append("<li><img src=images/a1.png alt=></li>");//插入$(".classname")内部
var a = '<video src="./video/a1.mp4" controls="controls" style="width: 100%;" loop="loop" autoplay="autoplay"></video>';
$(".classname").html(a);//替换成a内容

3、鼠标单击事件

$(".classname").click(function () {
        alert("");
});

4、修改class样式

$("#idname").addClass("newclassname");
$("#idname").removeClass("classname");

5、调用鼠标的click事件

$(".classname").click();

以下摘自网络：

jQuery函数主要有四大类
1、jQuery选择器 2、jQuery属性函数（取值赋值合体） 3 jQuery 方法 4jQuery工具类

  /*1.1基本选择器*/
                //$('*').css('background','red');                                                                //选择本页所有元素
                //$(this.getElementByXid("div1")).css('background','red');                //选择Xid值为div1的元素
                //$('li').css('background','red');                                                                //返回所有li元素
                //$('.x-col-10').css('background','red');                                                //返回所有class类为.x-col-10的元素
                //$(".x-titlebar-left").css('background','red');                                      //返回class为x-titlebar-left的元素
                //$("[src]").css('width','290px');                                                      //返回所有带src属性的元素

/3、jQuery方法/

    /*if($(this.getElementByXid("div1")).css("display")=='none'){
                        $(this.getElementByXid("div1")).show();                                                                                //显示div1元素
                }else{
                        $(this.getElementByXid("div1")).hide();                                                                                //隐藏div1元素
                }*/

                /*if($(this.getElementByXid("image1")).css("display")=='none'){
                        $(this.getElementByXid("image1")).show(400);                                                                //在400毫秒内显示div1元素
                }else{
                        $(this.getElementByXid("image1")).hide(400);                                                                //在400豪秒内隐藏div1元素
                }*/       
                //$(this.getElementByXid("image1")).toggle(400);                                                                //上面四行的整合（以后不再提示）

                /*if($(this.getElementByXid("div1")).css("display")=='none'){
                        $(this.getElementByXid("div1")).slideDown("slow");                                                        //下滑显示div1
                }else{
                        $(this.getElementByXid("div1")).slideUp("slow");                                                        //上滑隐藏div1
                }*/
                //$(this.getElementByXid("div1")).slideToggle("slow");

                /*if($(this.getElementByXid("div1")).css("display")=='none'){
                        $(this.getElementByXid("div1")).fadeIn("slow");                                                                //淡入div1
                }else{
                        $(this.getElementByXid("div1")).fadeOut("slow");                                                        //淡出div1
                }*/
                //$(this.getElementByXid("div1")).fadeToggle("slow");

                //$(this.getElementByXid("image1")).animate({height:'50px',width:"50px"});                //将image1的高度和宽度都动画变成50px
                //$(this.getElementByXid("image1")).animate({height:'+=50px',width:"+=50px"});        //将image1的高度和宽度都动画增加50px
                //$(this.getElementByXid("row2")).remove();                                                                                //删除row2及其子元素
                //$(this.getElementByXid("row2")).empty();                                                                                //删除row2子元素，保留frow2

                /*if($(this.getElementByXid("row2")).hasClass("blue")){
                        $(this.getElementByXid("row2")).removeClass('blue') ;                                                //给row2添加blue类
                }else{
                        $(this.getElementByXid("row2")).addClass('blue') ;                                                        //给row2去除blue类
                }*/
                //$(this.getElementByXid("row2")).toggleClass('blue') ;

 /*1.2过滤选择器*/
                //$("img[src$='jpg']").css('width','290px');                                           //返回所有属性src以jpg结尾的image元素
                //$("img[src*='head.jpg']").css('width','290px');                                //返回属性src包含head.jpg的img元素
                //$('lidd').css('background','red');                                                        //返回偶数行的li元素
                //$('li:even').css('background','red');                                                        //返回奇数行的li元素
                //$('li:first').css('background','red');                                                //返回第一个li元素
                //$('li:last').css('background','red');                                                        //返回最后一个li元素
                //$('li:eq(2)').css('background','red');                                                //返回第二个li元素
                //$('li:gt(2)').css('background','red');                                                //返回第二个以后的li元素
                //$('li:lt(2)').css('background','red');                                                //返回第二个以前的li元素

                //$("li:not(:empty)").css('background','red');                                        //返回不为空的li元素
                //$("div:empty").css('background','red');                                                //返回空的div元素
                //$("li div:contains('冀')").css('background','red');                        //在li元素下面选择文本包含冀的div元素
                //$("li div:has(input)").css('background','red');                                //在li元素下面，选择有子元素input的div元素
                //$("li:visible").css('background','red');                                                //选择可见的li元素
                //$("ul li:nth-child(3n + 1)").css('background','red');                        //选择3n+1（n=1,2,3.。。。）的li元素

 /*1.3组合选择器*/
            /*$("A B") 查找A元素下面的所有子节点，包括非直接子节点
                $("A>B") 查找A元素下面的直接子节点
                $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
                $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点*/

                //$("li input").css('background','red');                                                //选择li元素下面所有的input
                //$("li>div").css('background','red');                                                        //选择里元素下面的input子元素
                //$('.col-title .x-col-10').css('background','red');                        //选择col-title类下面的x-col-10的类元素

                //$('.col-title >*').css('background','red');                                        //选择类col-title下面所有的子元素
                //$('.col-title >div').css('background','red');                                        //选择类col-title下面所有的div元素
                //$('.col-title, .x-col-10').css('background','red');                        //选择col-title和x-col-10的元素
                //$('.x-col-10 + div').css('background','red');                                        //选择类x-col-10后面的所有div元素
                //$('.col-title ~ div').css('background','red');                                //选择类x-col-10后面的div兄弟节点

 /*1.3DOM函数选择器*/
                //$(this.getElementByXid("image1")).parent().css('background','red');                //选择image1元素的父亲
                //$(this.getElementByXid("row2")).children().css('background','red');                //选择row2的所有子元素
                //$(this.getElementByXid("row2")).children(":even").css('background','red');//选择row2子元素中的奇数元素

 /*2、jQuery函数（取值赋值合体）*/
                //alert($(this.getElementByXid("col8")).text());                                                        //读取col8元素的值
                //$(this.getElementByXid("col8")).text("测试");                                                                //给col8元素赋值
                //alert($(this.getElementByXid("col8")).html());                                                        //读取col8元素的值（包括html标记）
                //$(this.getElementByXid("col8")).html("测试");                                                                //给col8元素赋值（包括html标记）
                //$(this.getElementByXid("col8")).css("background-color","yellow");                        //修改col8元素的css
                //alert($(this.getElementByXid("col8")).css("background-color"));                        //读取col8元素的css
                //$(this.getElementByXid("col8")).css({"background-color":"yellow","font-size":"200%"});        //更改多个css值
                //alert($(this.getElementByXid("div1")).height());                                                        //读取div1的height值（不包括内边距，边框和外边距）
                //$(this.getElementByXid("div1")).height(180);                                                                //设置div的height值
                //$(this.getElementByXid("div1")).height('180px');                                                        //设置div的height值
                //alert($(this.getElementByXid("div1")).innerHeight());                                                //读取div1的innerheight值（不包括边框和外边距）
                //$(this.getElementByXid("div1")).innerHeight(180);                                                        //设置div的innerheight值
                //alert($(this.getElementByXid("div1")).outerHeight());                                                //读取div1的outerheight值（不包括外边距）
                //alert($(this.getElementByXid("div1")).outerHeight(true));                                        //读取div1的outerheight值（包括外边距）
                //$(this.getElementByXid("div1")).outerHeight(180);                                                        //设置div的outerheight值

jquery根据name属性查找

$("div[id]") 选择所有含有id属性的div元素 
$("input[name='keleyicom']") 选择所有的name属性等于'keleyicom'的input元素 

$("input[name!='keleyicom']") 选择所有的name属性不等于'keleyicom'的input元素 

$("input[name^='keleyi']") 选择所有的name属性以'keleyi'开头的input元素 
$("input[name$='keleyi']") 选择所有的name属性以'keleyi'结尾的input元素 
$("input[name*='keleyi']") 选择所有的name属性包含'keleyi'的input元素 

$("input[id][name$='keleyi']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素 

例如：$(“input[name=’keleyi’]”) 表示查找的是name为keleyi的表单。